outlineとbox-shadow

borderoutlinebox-shadowプロパティーを組み合わせ、それぞれ別に少しずらしてアニメーションさせようとかそういう変なの考えてたら、Firefox 21(及びAurora 23)とそれ以外でoutlineが描画される位置が違うことを知った。最近は普通に書くとFirefoxでハマることが多いのは僕だけか。

Demo: outline and box-shadow

Firefox 21とAurora 23ではbox-shadowの外側にoutlineが描画されてしまい、ぼかしが入ったりすると隙間ができる。

CSS3 BackgroundsCSS3 UIを当たった限りでは、outlineはスペースを確保しないとなっていることとouline-offsetの項にデフォルトでは枠線のすぐ外側から描画されるべきくらいしかどう描画すべきかの指針は見つけられなかった。outline-offsetの項を尊重すればバグということになりそう。

Bugzillaでは「こうすればなんとかなるよ!」に「ここでハックの話しすんな」とか「これでもいいよね?」に「うるせーバグなんだから直せ」みたいなほほえましいやりとりだった。4年以上前からあるのか……。