私は同じ問題を抱えていました.ページ内であまりにも多くのことが起こっているときに発生するバグのようtransform: translateZ(0);-webkit-transform: translateZ(0);
です.ブラウザを強制する次の変換コードを固定位置要素に追加することで修正できました, ( )ハードウェア アクセラレーションを使用してデバイスのグラフィック プロセッシング ユニット (GPU) にアクセスし、ピクセルを飛ばします。一方、Web アプリケーションはブラウザーのコンテキストで実行されるため、レンダリングの大部分 (すべてではないにしても) をソフトウェアが実行できるため、遷移の処理能力が低下します。しかし、Web も追いついてきており、現在ではほとんどのブラウザー ベンダーが、特定の CSS ルールによってグラフィカル ハードウェア アクセラレーションを提供しています。
-webkit-transform の使用: translate3d(0,0,0); CSS トランジションのために GPU を起動し、よりスムーズに (より高い FPS) にします。
注: translate3d(0,0,0) は、表示内容に関しては何もしません。オブジェクトを x、y、z 軸で 0px 移動します。ハードウェアアクセラレーションを強制するのは単なるテクニックです。
#element {
position: fixed;
z-index: 9990;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}