Chrome や Opera でアンカー リンクをクリックすると固定サイドバーが消えるのはなぜですか?

Chrome と Opera のレンダリングの問題: 固定位置の要素がアンカー クリックで消える

提供された HTML コードは、右側に固定サイドバーを作成しようとします- 書類の手前側。ただし、

が要素がページに追加されると、アンカー リンクをクリックすると固定サイドバーが消えることがあります。

Chrome の解決策:

Chrome でこの問題を解決するには、固定要素に次のスタイルを追加します:

<code class="css">#sidebar {
  -webkit-transform: translateZ(0);
}</code>

特定の状況では、Google Chrome では、再描画を他の CSS プロセスから分離し、表示の問題を効果的に解決するために 3D 変換を組み込む必要があります。

Opera の解決策:

Opera での問題の修正はもう少し複雑です。継続的な再描画を強制する解決策は次のとおりです:

<code class="css">@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}</code>

このアニメーションにより、Opera は常にレイアウト係数を再計算して再レンダリングし、固定位置が安定した状態を維持します。

注:

ほとんどの場合、この解決策はバグを効果的に解決しますが、Opera が固定位置を再確立しようとするときに、時折小さなちらつきが発生する場合があります。

以上がChrome や Opera でアンカー リンクをクリックすると固定サイドバーが消えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。