opacity や translate 4つのバグと解決策

2017/01/29　Mac OS / Safari 限定で translate バグのスクロールフリーズが再発しました。面倒くさいので直してません。

 

opacity: n; と z-index: -n; を指定するとタップできなくなる

発生したブラウザ

Android 5

バグの原因

なぜか重なり順が壊れるらしい。

解決策

display: none; や show() / hide() メソッドを、ユーザーエージェント切り替えでAndroidのみに設定する。

Android 4 以下では問題ないようだ。

 

fixed 要素に overflow: auto; / opacity: n; を指定するとブラウザスクロールができなくなる

発生したブラウザ

Android 4.1 / iOS 8

バグの原因

不明

解決策

left: -n; などマイナス値を付与して画面外側へ移動させ、transition と transform を組み合わせてスライドさせる。

問題なくスクロールできる場合もあり、発生条件がはっきりとしない。

 

translateX() / translateY() / translate3d() の値が2倍に

発生したブラウザ

IE 10

バグの原因

IE6 float margin2倍 バグのようなもの？

解決策

IE10専用のCSSハックで囲むとなぜか直る。ユーザーエージェント切り替えが必要な場合あり。

CSS

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .hoge { transform: translateX(100px) !important; } }

1 2 3 4 5

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {     .hoge {         transform: translateX(100px) !important;     } }

 

translateX() / translateY() を指定した要素に overflow: auto; でスクロールを表示させるとスクロールがフリーズ

発生したブラウザ

Chrome / Safari

バグの原因

不明

解決策

translate3d() に変更する

CSS

.hoge { overflow: auto; transform: translate3d(100px, 0, 0); }

1 2 3 4

.hoge {     overflow: auto;     transform: translate3d(100px, 0, 0); }

 

これらを克服したドロワーメニュー

スマホアプリ並みに滑らかなjQueryドロワーメニューを作りました。