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

150902_001

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ハックで囲むとなぜか直る。ユーザーエージェント切り替えが必要な場合あり。

 

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

発生したブラウザ
Chrome / Safari
バグの原因
不明
解決策
translate3d() に変更する

 

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

150902_002

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

    • このエントリーをはてなブックマークに追加