kzhrk's blog

Posted on 2015.12.11

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のシェア率は、もう決して持ち直しませんでした。