以下に、記事の本質を捉えた質問ベースのタイトルをいくつか示します。 明確かつ簡潔: * ボディに UL を備えた固定位置アンカー: Chrome と Opera で壊れるのはなぜですか? ※サイドバーが消えます

本文に UL を含む固定位置アンカー: Chrome と Opera のレンダリングの問題を解決する

レンダリングの問題の説明

Google Chrome と Opera でレンダリングの問題が発生する本体内に固定位置のサイドバーと順序なしリスト (UL) を含むコードを実装する場合。具体的には、アンカー リンクをクリックすると、サイドバーが一時的に消えます。

Chrome の解決策

Chrome でこの問題に対処するには、次の CSS プロパティをサイドバーに適用します。

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

これにより 3D 変換が実行され、再描画が他の CSS 操作から分離され、表示のバグが解決されます。

Opera ソリューション

Opera の場合、次の CSS アニメーションを使用して連続再描画を強制できます:

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

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

このソリューションでは、UL 要素が存在するにもかかわらず、サイドバーの固定位置を維持しながら、Opera がレイアウト係数を継続的に計算してレンダリングするように強制されます。

注

Opera ソリューションでは、次のような結果が生じる可能性があります。再描画が行われるとわずかなちらつきが発生します。ただし、現時点では、これがこの問題に対する最適な解決策です。

追加の考慮事項

このバグのバリエーションは、DOM ツリーの上位に 3D 変換がある場合にも発生する可能性があります。この問題を防ぐには、まずそのような変換を削除してください。

場合によっては、Chrome での問題を解決するには、translateZ(0) の代わりにscale3d(1,1,1) を適用することが必要になる場合があります。

以上が以下に、記事の本質を捉えた質問ベースのタイトルをいくつか示します。 明確かつ簡潔: * ボディに UL を備えた固定位置アンカー: Chrome と Opera で壊れるのはなぜですか? ※サイドバーが消えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。