UL タグを含む固定位置 div が Chrome と Opera で消えるのはなぜですか?

固定位置と UL タグによる Chrome および Opera のレンダリングの問題

HTML コードの特定の構成により、Google Chrome および Opera でレンダリングの問題が発生する可能性があります。固定位置 div に

Chrome の解決策

Chrome では、この問題は -webkit-transform: translationZ( 0) 固定位置 div の CSS スタイルに変更します:

#sidebar {
  -webkit-transform: translateZ(0); /* Fix for Chrome rendering issue */
}

この手法により、Chrome は div 上で 3D 変換を実行するようになり、根本的なレンダリングの問題に対処するようです。

Opera の解決策

Opera の問題の処理は Chrome とは異なります。 Opera の問題を解決するには、レイアウトに影響を与える可能性があるプロパティの再描画を継続的に強制する必要がありますが、実際には影響はありません。この場合、ページ レイアウトに干渉する可能性が低いため、margin-bottom が使用されます。

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

#sidebar {
  animation: noop 1s infinite;
}

このコードにより、Opera はサイドバーの margin-bottom を継続的に再描画し、強制的に固定位置を維持します。このソリューションは完全に完璧というわけではありませんが、ちらつきを最小限に抑え、意図した動作を復元します。

Opera ソリューションは普遍的な修正ではなく、特定の位置要件に基づいて調整が必要な場合があることに注意することが重要です。問題の要素。この問題が発生した場合は、推奨される CSS をニーズに合わせて変更してみてください。

以上がUL タグを含む固定位置 div が Chrome と Opera で消えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。