Chrome のバグらしきものを発見。

サイトの改修を少しずつ行っていて、メインの確認環境は、Gecko エンジン。
それだけだと、他のブラウザで盛大に結構スタイルが崩れてしまう事があるので、SRWare Iron こと
Webkit エンジンを使用した、Google Chorme のクローン的なブラウザで確認しています。

なんですが、どうしても納得できない CSS の変化があって1つずつ調べていったらバグらしきものにぶつかりました。
バグの内容はというと、こんな感じ

[code lang=”css”]
#bugbug {
border-bottom: solid 6px #DDD;
-webkit-border-radius: 5px;
background: #FFF;
}
[/code]

上記のような border の太さを radius 以上の数値に設定している要素を表示すると
どういったわけか、描画時に broder の太さが勝手に変化してしまいます。
radius は角丸の半径だから、border がそれ以上の値になることはあり得ると思うんだけどなぁ。

Webkit エンジンの Lunascape で同じものを表示しても乱れないため、Webkit そのものではないようで
Chrome や、クローンである SRWare Iron で発生しているので、Chrome 特有のものなのかも。

You may also like...