2012-01-22

borderとCSS Transformを組み合わせるとOperaでバグる

写真を紙に挟んだような効果をCSSで作ったらOperaでバグった話。細い枠線でも起こるけど気づきづらい。太くするととてもわかりやすい。border絡みは大体いずれかのブラウザで残念な結果に終わるという経験則はやはり正しかった。

Demo: Border and CSS Transform Bug on Opera

あーアレをあーしてアレしてるからこうなるんだなというような想像はなんとなくできるので、仕様か実装上の都合なんだろう。borderを使った場合は回避策はなさそうなので、borderを使わない形で書き換えるとOperaではうまくいく……が、今度はWebKitでのbox-shadowとtransformを組み合わせると要素の端に線が浮き出ることがあるバグ(結構メジャー)にハマる。ウケる。

回避するにはバグが発生するコードをかけ合わせてやる。

.test::before,
.test::after {
  border: 1px solid white;
  position: absolute;
  width: 62px;
  height: 62px;
  content: "";
  background-color: white;
  transform: rotate(45deg);
}

太い枠線を使わなければOperaでバグらず、枠線があればWebKitで線が浮き出ることはないので、1pxだけ背景色と同じ色で枠線を引いてやるというわけ。バッドノウハウ臭がすごい。