日報 #72 - REM-unit-polyfillのfilterエラーについて

さくらクラウドの素晴らしいご対応という大事なお話は、
俺の体力が全快しているであろう休み明けにしっかり書くとして、、、

世間ではハロウィンらしく、
ちょいちょい仮装した人が街に繰り出しているようです。
こんなことちょっと前まではなかったんですけどね、
変わるものですね。
とはいえまだトリック・オア・トリートなんつって無邪気に他人の家をピンポンダッシュするような文化にはなっていないんだろうとは思っています。
しかしまぁ日本のイベントの大先輩である豆まきとか、 もっと若者が盛り上がるイベントになりうるポテンシャルは秘めてると思うんですけどね。
やっぱ鬼とかださいんですかね。
ミニスカ要素が無いのが駄目なんですかね。

さておき今日の話。
僕のデスクの右隣はエンジニアN氏がいるのですが、 左にはもう一人のエンジニアM氏がおります。
僕が作ったカスコードに対して、 めげず、くさらず、バカにせず、 優しくもブルドーザーのような力強い開発力でもってメスをいれてくれる必殺仕事人でございます。
このような優秀な人材N氏とM氏に囲まれて開発できる環境に日々感謝でございます。
と、本日そのM氏から緊急メッセが。
「ありのままに以下略しますと、IE8対応のためにCSSにいれたfilter要素のせいで、marginとpaddingがどっかいった」
「そんなわけあるかい、みせてみぃ」
で、マジだったという話が本日の話題。
IE8という太古のブランチが生み出すデザインは、時に芸術的すぎて閲覧者を不安にさせることがあります。開発者もしかりです。
今回のケースは、box-shadowをいうありふれたエフェクトに対応しようとした結果、
わかるわけねぇだろ、、、というようなバグを踏んだお話です。

IE8でbox-shadowに対応するのは下記のコードで出来るようです。

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

まぁここまではいいんです。
M氏によると、これを挿入した要素のmarginが実家に帰ったとのことで、
試してみたら本当にそうなりました。
marginが修正されるのでもなく、忽然と姿を消したのです。
なかなかなレアケースなのでディグって見ますと、こいつが犯人でした。
REM-unit-polyfill.js
ちょっとまえにIE8だとremがきかなくなるからといってつっこんだjsモジュールです。
これがrem<=>px計算をする際に、=のある要素について奇っ怪な動きをすることが分りました。
ということで、rem-unit-polyfill.jsを修正します。
今回はfilter:progid:DXImageTransform.Microsoft.Shadow要素のみを排除するので161行目辺りでremoveMediaQueryするときに、

css = css.replace(/filter:progid:DXImageTransform\.Microsoft\.Shadow(.*?);/g, "");

こんな感じでDXImage要素をぶっこぬきます。
これで取り急ぎ謎現象は抑えられます。

しかしremといい、box-shadowといい、CSS3に対応していないブラウザを使うのは国策レベルで禁止すべきなんじゃないのかと日々思いながら、
そういえば俺のパンツのゴムのヒモもゆるっゆるだしそういうもんだよねと思いながら寝ます。
ばいならせかい。