CSSでfixedなどを使った時、ページスクロールがガタガタするときの対応

よく忘れるのでメモ。

CSS TransformsでCSS Animation/Transitionと組み合わせて、要素を移動させたり、拡大縮小させるとちらつくことがあるらしい。
ちらつく現象はiOSのSafariの専売特許ではなく、PCやスマホに関係なく発生するらしい。

position: fixed;を指定したスタイルに以下を追加する。

  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;

それでも解消されない場合は、

  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  overflow:hidden

ちなみに、backface-visibilityは全てのブラウザには対応していない。
https://developer.mozilla.org/ja/docs/Web/CSS/backface-visibility