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

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

Mary-Kate Olsen

リリース： 2024-10-26 06:12:02

オリジナル

121 人が閲覧しました

Here are a few question-based titles that capture the essence of the article:

Clear and Concise:

* Fixed Position Anchor with UL in Body: Why Does It Break in Chrome and Opera?
* Sidebar Disappears After Anchor Click: Troubleshooting for Chrome and Oper

本文に 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 サイトの他の関連記事を参照してください。