CSSで、画面スクロールするとfixed要素がちらつく


主にfixedしている要素に発生する。

バグではないのだけど、地味に気になる。

 

 

方法1

CSSで、fixedしている要素にこの2設定を追加する

position:fixed;
~
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

これは描画をCPUからGPUにする裏技。

 

 

方法2

CSSで、fixedしている要素に、さらにこの3設定を追加する

position:fixed;
~
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
overflow:hidden

 

 

z-indexにマイナス値(-1とか)を設定していないか確認

z-indexにマイナス値を設定していると発生するとかしないとか。

・・・今回の場合は、これは当てはまらなかったので未確認。

 

 

背景色設定を見直す

あとは「background-color」を設定しているとチラつきやすいので、無用な背景色などを極力見直してみると良いかも。

・・・今回は、「background-color:transparent」(透明色を設定)を無駄に多用していたので、不要な設定を根こそぎ削除した。

 

これらの設定を一通りしたら、チラつきが解消した。ふぅ~