100万回生きたIEバグ
この記事は、CSS 昔話 Advent Calendar 2015の記事になります。
100 万年もフィックスしない IE バグがありました。
100 万回も潰され、100 万回も対応されたのです。
立派なシェア率を誇るブラウザでした。
100 万人の人がそのブラウザを必要とし、100 万人の人がそのブラウザのサポートが切れたときに泣きました。
IE は、1 回も泣きませんでした。
とあるマークアップエンジニアは、IE6 で position: absolute を使わなければなりませんでした。
IE6 は絶対配置なんか嫌いでした。float や hasLayout をもつ要素や width: 100%;で float している要素が大嫌いでした。
そんな要素の間や直前で position; absolute;を指定した要素を、IE6 はいつもどこかに隠してしまいました。
他のブラウザでは同じように絶対配置されるのに、IE6 だけ要素がどこかにすっ飛んで消えてしまいます。
マークアップエンジニアは泣きながら親要素に zoom: 1;を指定したり、マークアップ構造を変更してバグを潰しました。
とあるマークアップエンジニアは、IE6,7 で z-index を使わなければなりませんでした。
IE6,7 は z-index なんか嫌いでした。
<div style="position: relative;">
<div style="position: relative; z-index: 1;">
<p style="position: absolute; z-index: 9999;">HOGE</p>
</div>
<div style="position: relative; z-index: 2;">
<p style="position: absolute; z-index: 100;">FUGA</p>
</div>
</div>
IE6,7 は親要素に指定された z-index が優先されてしまうので、z-index が小さい FUGA を手前に出してしまいました。
マークアップエンジニアは jQuery.each()を使って泣きながらすべての要素に z-index を定義してバグを潰しました。
とあるマークアップエンジニアは、IE6 で透過 PNG を使わなければなりませんでした。
IE6 は透過 PNG なんか嫌いでした。アルファ値というものを理解したくありませんでした。
マークアップエンジニアが PNG24 の透過画像を img タグや background-image で表示しようとすると、IE6 は透過部分をグレーに塗りつぶしてしまいました。
マークアップエンジニアは泣きながらDD_belatedPNG.jsという VML(Vector Markup Language)を使った JavaScript ライブラリでバグを潰しました。
あるとき、IE はメジャーブラウザでした。IT 革命の名のもとに大企業が業務の IT 化を進める中で、IE は着実にシェアを伸ばしていました。
どんな企業も IT 化を進めました。IE6 依存のシステムを導入する企業もいました。
あるとき、IE はレガシーブラウザでした。シェア率は低迷してしまいましたが、IE は気にしませんでした。IT 革命の黎明期に IT 化を進めた大企業とそのグループ会社の中でまだまだ使われ続けていたからです。
どんなマークアップエンジニアも、IE のお世話をしていました。
zoom: 1;を定義するマークアップエンジニアもいました。JavaScript を駆使するマークアップエンジニアもいました。コンディショナルタグで CSS を切り替えるマークアップエンジニアもいました。
IE はいいました。
「俺はこんなにマークアップエンジニアを苦しめてきたんだぜ」
たったひとり、IE に見向きもしないマークアップエンジニアがいました。
IE はそのマークアップエンジニアのそばにいって、
「俺は 100 万回もバグったんだぜ！」
と、いいました。
マークアップエンジニアは、
「そう…」
と、いったきりでした。
IE は少し腹を立てました。なにしろ、シェア率 No.1 を誇るブラウザでしたからね。
つぎの日も、つぎの日も、IE はそのマークアップエンジニアのところにいって、いいました。
「君はまだ、バグを潰しきっていないんだろ」
マークアップエンジニアは、
「そう…」
と、いったきりでした。
ある日、IE はマークアップエンジニアの前でクラッシュしていいました。
「俺、T◯Y◯TA のグループ会社で使われ続けてるんだぜ」
マークアップエンジニアは、
「そう…」
と、いったきりでした。
「おれは、100 万回も…」
と、いいかけて、IE は、
「そばにいても、いいかい」
と、マークアップエンジニアに尋ねました。
マークアップエンジニアは、
「こっちくんな」
と、いいました。
ある日、マークアップエンジニアはフロントエンドエンジニアに役職を変えてしまいました。
IE ははじめて泣きました。朝になって夜になって、また朝になって夜になって。
IE は 100 万回泣きました。
朝になって夜になって、ある日のお昼に IE は泣き止みました。
IE は正式サポートが切れて、静かに動かなくなりました。
IE のシェア率は、もう決して持ち直しませんでした。