MacでWindowsXPを動かすと、Safariのbackgroundプロパティでバグが発生する

2009年 2月 10日

そこはかとなく専門的な話。
MacでWindowsを動かしているのだが、Safariを使っているときに致命的なバグを発見した。
要素の背景に対して、背景画像を繰り返しなしで、位置を指定して表示させるCSSを書くと、
Windows on Mac + Safariでは画像が一切表示されなくなる。
具体的には
<div>もげもげ</div>
に対して、下のようなmoge.png という背景画像を用意し、

div {
height: 200px;
background: white url(moge.png) no-repeat 100% 100%;
border: 1px solid #0000aa;
padding: none;
margin: 60px;
}
というスタイルシートを書いたとする。
すると、通常以下のようにレンダリングされる筈である。
テストはOpera、Firefox、IE8、Chromeで行った。いずれも正しいレンダリングである。

Safariではこうなる。

気になって色々調べてみたら、似たようなバグが昔のバージョンのSafariでは確認されていて、特に回避方法は見つかっていないそうだ。
現在のMac用のSafariでは修正されているらしく、きちんとレンダリングしてくれる。
まあ、わざわざWindowsをMacで動かしたあげく、Safariを使う人もそうそういないだろうから大した問題ではないのだろうけど・・・
–
参考ページ(だいぶ古いバージョンのSafariに関する話)
れぶろぐ:　Safari の backgroung-position のバグ
てんぽ : メモ：Safari background-imageのバグ
–
面白いことに、WindowsしかOSの入っていないマシンでSafariを動かしてもこのバグは再現できない。Appleめ。
MacでWindowsなんか動かすからこうなるんだ、という話でした（のかもしれない）。

---