IE11のElement.scrollLeftが効かないときにCSSを直した話

最近はJavaScriptとCSSを良く書いているのだが。
IE11対応してると意外と動くじゃんと言う感想と投げ捨てたいという感想がないまぜになる。

ある要素内を横方向にスクロールしたいという処理でIE11だけどうにも動かない。
でもMozillaのドキュメントのサンプルは動くしよくわからん。

というところで「IE11だけスクロールバーが出てこないのおかしいな？」と気がついて要素に当たってるCSSを以下から

overflow: scroll hidden;

次に書き換えた。

overflow-x: scroll;
overflow-y: hidden;

そしたらスクロールバーも出てきて動いた。マジすか。
デザイン的にスクロールバー隠しているせいもあってだいぶ気が付くのが遅れてしまった。

しかしちょっと前は「CSSけっこー分かってきたぞ」ってなってたけど今は「CSSまったくわからん」ってなってる。

裏テクかよって言うハックで回避しないといけない箇所が割と多く。
IEに限らずブラウザのバグ多すぎない？
まあそんだけ難しいプロダクトってことなのか。

それはそれとしてIE11はMS自ら使うなと言ってるくらいなので積極的に捨てていきましょう。
プロジェクトの要件定義に対応するって書いちゃったからってかんじで対応することになってるけど、今からでも改めてもいいんですよ。過ちを改めるのに遅いということはない。