Windowsのchromeでだけstickyがガタついたので調べた
タイトルの通りで Macでは再現しない し、確実に発生するわけでもなく調査にそこそこ時間がかかったので、もしかすると同じ現象に陥っている人がいるのではないかと思ったので記事にしています。
現象としては以下の画像のような事象のことです。
現象を確認した環境は Windows10 で以下です。
- 116.0.5818.0（Official Build）canary （64 ビット）
- 114.0.5735.110（Official Build） （64 ビット）
もしかすると113以前は起こっていなかったのではないかと思いますが、今となっては確認できないので不明です。
実際に確認できるサイトを作ったので、もし Window で確認環境をお持ちの方は確認してみてください（ちなみにすべての項目で現象が発生するわけではありません、説明は後述します）。
コードはこちらになります。
発生条件は以下の 2 つのような気がしています。
- sticky するのは overflow: auto 内である
- rotate で回転するアニメーションがある
注意点としては確実に発生するわけではなく、以下のような行動をとると発生しやすいように感じました。
- マウスのホイールを高速で何度か動かしたりしてみる
- 上記で発生しないときには window をリサイズしてから何度か動かす
1 の IntersectionObserver + CircularProgress（MUI） + sticky が最初にの現象に気づいたときの最小構成だと思っていたものです。ただし IntersectionObserver の Observe がすべて終了した場合に現象が発生しなくなります。
いろいろ試してみてもさっぱり分からなかったので色々要素を除外していると、関係なさそうな CircularProgress を削除したときに現象が発現しないことがわかりました。これが 2 になります。
なぜ CircularProgress で発生するのかよくわからなかったので、LinearProgress に置き換えたものが 3 です。こちらに変更しても現象は起こりませんでした。
原因は CircularProgress のようなので発生条件で不要そうな IntersectionObserver を除外したものが 4 です。こちらは現象の発生を確認できます。
MUI のコンポーネントは SVG だったので div 要素ではどうかと試してみたものが 5 になりますが、こちらも同様に現象は発生しました。
実際にこの現象が発生するときは、コードもかなり複雑で、なかなかこういったシンプルなアニメーションが原因だということには気づきにくいかと思います。もしこの現象に詳しい方がいたり、事象がそもそも発生しなくなっているようであればコメントいただけると嬉しいです。
Discussion