アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:
2011年12月21日
Mac版chromeの最新版(ver.16)でCSS3のborder-imageのレンダリング不具合?(11/12/21解決)
夢実現のアファメーションを実践する起業家にもっとも読まれているブログは?
chromeをバージョンアップ。
先日、macのchrome最新版(ver.16)が出たのでさっそくアップデート。
...ええ。新しもの好きなので。
普通にサイトを見てる分には特に問題は出てなかったんだけど...んが。
制作する側としてはちょっと困ったことが。
どうやら、CSS3のborder-imageをつかった部分に背景が表示されないという不具合が発生しているらしい。
ver.15.xのときは問題なかったので、おそらくバグではないかと。
おそらくバグなのでは?
海外のコミュニティでも同様の話題が。
中学生英語とインチキ口語英語で止まっている僕の読解力では...完璧には読みこなせていませんが(汗)
『オレも背景がでねーよ』
『ver.15のときはなんともなかったのに...バグじゃね?』
っていうようなことを言っている気がします。
ちなみに、chromeの厳密なver.は『16.0.912.63』です。
日本のサイトでもいろいろと探してみたけれど、いまのところこれ系のネタがないので、念のため備忘録として。
※もしかしたら僕のコードミスかもしれないので...(汗)
該当するCSS部分のコード。
.hoge {
-moz-border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
-webkit-border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
}
ボーダーの部分は今まで通り。
本来背景もボーダーで指定した画像が表示されるはず。
今までは上記のコードで普通に出ていたし、そもそもsafariやFirefoxでは表示されるので、前述のとおりバグなのでは...と思っています。
11/12/21追記
いろいろと試したところ、コードの順番が影響しているようです。
上記の場合、chromeだけ背景が表示されませんが、
.hoge {
border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
-moz-border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
-webkit-border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
}
としたところ、表示されました。
つまり、border-imageを接頭辞(-webkit)で上書きすることでOKってことですかね。
12/01/12追記
chromeのbugzzilaによると、どうやらborder-imageは『fill』属性を指定しないと中身が表示されないらしい。
(デフォが透過らしいので。⇒border-image-slice-fill)
んで、-mozと-webkitについては『fill』は無視するので、
上記で、順番をそのままにした場合、border-imageに『fill』を追加して
.hoge {
-moz-border-image: url(../img/btn_direct_r.png) 5 15 5 5 stretch;
-webkit-border-image: url(../img/btn_direct_r.png) 5 15 5 5 stretch;
border-image: url(../img/btn_direct_r.png) 5 15 5 5 fill stretch;
border-width: 5px 15px 5px 5px
}
こんな感じか。
現状、11/12/21の追記のとおり、順番の入れ替えでも大丈夫だったけど、fillを入れろってのはW3Cが言ってることなので、そっちにならっておくのがいいかもしれないですね。
この記事に関連する(かもしれない)書籍
投稿者 kuro : 2011年12月21日 04:59 | ID:850