CSS:IE専用「filter」によるalphaが一定条件下でバグる

goto_jp 340views 更新:2014年11月20日

IE8以前ではCSSの「opacity」プロパティは使えず、代わりに下記のIE独自仕様のfilterプロパティで再現することができました。

filter: alpha(opacity=80);

また同様にIE8以前は影を落とす「box-shadow」が使えない代わりに下記のプロパティで再現することができました。

filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=0, strength=3, enabled=true);

しかしこれらを同時に合わせると、バグが発生します。

今回確認したのは、position:absoluteで浮かせたレイヤーにfilterでの影を適用し、そのレイヤー上の要素にfilterでのalphaを適用していたのですが、それを行うとalphaをかけた要素だけでなくレイヤーまで貫通してぽっかり穴が開くという現象が起きました。

対策としてはいずれかを切るだけなのですが、優先度的に今回は影を切りました。

IE専用プロパティなので当然IE以外では発生しないのですがIE自体ですらバグが発生するので、少々複雑な組み方をする場合はfilterプロパティに頼らない方が良いと思われます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません