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

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

要素が存在すると、この問題がさらに悪化します。

Chrome ソリューション

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

#sidebar {
    -webkit-transform: translateZ(0);
}

Opera ソリューション

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

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}

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

追加の考慮事項

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

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