background-sizeで1ピクセルにした時の各ブラウザの挙動の違い

昨日の日記で書いた通り、こうしたtumblrを始めてみました。

http://96x96.net/
仕組みとしては、一つの投稿ごとそれぞれ CSS で border-image と背景画像を指定して実現しています。マウスオーバーで動くのは単純な Transitions ですし、基本的にはそんなに難しいことはやってないですね。対応しているブラウザは新しいものに限られてしまうものの、主要なモダンブラウザなら大抵表示されると思います。

で、問題は背景画像の設定について。

よくある背景画像の指定というと

div{
	background-color: #FFFFFF;
	background-image: url(image.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 100px 50px;
}

みたいな感じなのは皆さんご存知だと思うのですが、CSS3ではさらに background-size で画像のサイズを変更した指定というのも可能です。
参考：The 'background-size' property - CSS Backgrounds and Borders Module Level 3

例えばこの縦横100ピクセルの画像を背景に使うとして

div{
	background-color: #FFFFFF;
	background-image: url(image.jpg);
	background-repeat: repeat;
	background-size: 50px 80px;
}

検証ページ sample01
「background-size: 50px 80px;」とすると、横幅が50ピクセル、縦幅が80ピクセルに縮小された状態で背景として並べられます。

で、今回はこの指定を横幅1ピクセルにしてストライプ状にしよう……というのが目的だったのですが、実際やってみるとブラウザごとに画像のどの部分の1ピクセルが採用されるかはまちまちで結構困りました。
具体的に Google Chrome/Opera/Safari/Firefoxで比較していきます。

元になる背景画像は分かりやすいよう、ガイドラインを引いておきます。

image.png 横100ピクセル、縦100ピクセル

div{
	background-color: #FFFFFF;
	background-image: url(image.png);
	background-repeat: repeat-x;
	background-size: 1px 100px;
}

検証ページ sample02

Google Chrome

Google Chrome 17.0.963.46

Google Chromeは（左端が1ピクセル目として）51ピクセル目が採用されます。なお全体が奇数であれば中央のピクセルになります。

Opera

Opera 11.61

Operaも51ピクセル目なんですが、アンチエイリアスがかかって50ピクセル目と混色になっています。
……と、ここまではいいんですが。

Safari

Safari 5.1.2

Safariは上記の2つと違い、なんと左端の1ピクセルがアンチエイリアスで伸長されてしまいます。

Firefox

Firefox 10.0.1

FirefoxはSafariとは真逆の右端の100ピクセル目。

その上これは、一定以上の横幅がある場合の話で、幅が短い状況は51ピクセル目になります。

検証ページ sample03
上のdiv要素はwidthは100%の指定、下のdiv要素はwidthが50pxの指定です。
ストライプ状の模様が違うのがよく分かりますね。

挙動が切り替わる幅の閾値がいくつかは、背景に指定した画像サイズに応じてまちまちなのではっきりとは言えないんですが、background-sizeを1pxにした場合だけでなく、極めて小さくしたときにも表示が乱れるんですよね。
検証ページ sample04

div{
	height: 100px;
	background-color: #FFFFFF;
	background-image: url(image.png);
	background-repeat: repeat-x;
	background-size: 15px 100px;
}

この指定では、100ピクセルの画像を幅15ピクセルに縮めた画像で埋まるはずなんですが、

(Google Chromeの場合)

Firefoxではこのように

一度左端に15ピクセルに縮まった画像が表示されるものの、それ以降は1ピクセルが伸びたストライプ状になってしまいます。
これも元の画像サイズと適用する要素の幅の値で閾値がまちまちなんですが、結論としては

background-sizeで極端に縮小する指定は使わない方が無難

ということに。
……まぁ、あんまり使う状況が無さそうな指定ですけれども。
ちなみに今回のサンプルは横幅だけを変更しましたが縦幅でも同じような傾向になっています。

あと、今回の1pxを伸ばしたレイアウトは、ブラウザからの拡大操作で見た目が崩れたり、vendor-prefixが取れるようになると今の指定ではダメだったりと、色々と問題が多いのであくまで一発ネタで近いうちにまた作り直す予定です。