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

Google Chrome および Opera のアンカーと UL リストの位置の問題を修正

この記事は、Google Chrome および Opera ブラウザーで観察されるレンダリングの問題に対処しますページ内のアンカー リンクをクリックすると、固定位置のサイドバーが消える場合があります。 ＜ＵＬ＞の存在は、ページ上の要素がこの問題を悪化させます。

Chrome の解決策

固定サイドバー要素に -webkit-transform: translationZ(0) プロパティを適用すると、Chrome でこの問題が解決されます。 。この手法は、3D 変換を行う際の再描画と CSS レンダリングの分離を利用して、表示の不具合を軽減します。

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

Opera ソリューション

Opera でこの問題に対処するには、異なるアプローチ。 @keyframes アニメーションを使用して、レイアウトに影響を与えるものの、ページの外観には実質的な影響を与えない CSS プロパティの継続的な再描画を強制します。この場合、margin-bottom プロパティをアニメーション化します。

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

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

このソリューションは完璧ではないことに注意することが重要です。場合によっては、サイドバーが位置を失い、すぐに再描画されると、短いちらつきが発生することがあります。この問題は、再描画間の Opera の固有の動作が原因です。

追加の考慮事項

その後のこのバグの発生により、3D 変換が既に適用されている場合に頻繁に発生することがわかりました。本体または親要素。この方法は、GPU レンダリングを強制するためによく使用され、永続的なレンダリングの問題を引き起こす可能性があります。上記のソリューションを実装する前に、既存の 3D 変換を削除することを検討してください。

Google Chrome と Opera は、安定性が向上して固定位置を処理できるようになりました。これらの修正は、ページ上での UL 要素の使用に関連するレンダリングの問題の解決に有効であることが実証されました。

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