Chrome で固定ナビゲーション バーが消えるのはなぜですか?

Chrome で消える固定要素

position:fixed を使用して固定ナビゲーション バーを実装すると、開発者は要素が散発的に消える問題に遭遇する可能性がありますクロムで。この問題は、アクティブなナビゲーション項目が部分的または完全に非表示になることで発生する可能性があります。

原因と解決策

この問題は、Chrome のレンダリング エンジン、特にトップ: 0 の要素。これを解決するには、次の CSS ルールを固定要素に追加します。

<code class="css">-webkit-transform: translateZ(0)</code>

説明

このルールは、Chrome にハードウェア アクセラレーションの使用を強制します。レンダリングの問題を回避して、固定要素を継続的にペイントします。 3D 変換を適用すると、ブラウザのグラフィック プロセッサ (GPU) が作動し、ページ遷移や要素の操作中であっても要素が表示されたままになります。

追加情報

報告された問題は、top: 0 の要素には影響しますが、bottom: 0 の要素には影響しません。これは、問題が Chrome によるビューポートの上部付近の要素の処理方法に関連していることを示唆しています。

一時的な修正

Chrome からの恒久的な修正を待っている間、修正された要素にbottom:0を使用すると回避策が提供される可能性があります。

問題の報告

この問題の認識を高めるために、Chrome のバグが報告されました: https://bugs.chromium.org/p/chromium/issues/detail?id=288747。ユーザーは、このバグにスターを付けて、解決を優先することで貢献できます。

以上がChrome で固定ナビゲーション バーが消えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。