UL リンクをクリックすると、Chrome と Opera で固定位置アンカーが消えるのはなぜですか?

Chrome と Opera のレンダリングの問題: 本文に UL が含まれる固定位置アンカー

Chrome や Opera などの特定のブラウザでは、位置を指定しようとすると、特有のレンダリングの問題が発生する可能性があります。 UL タグの横にある固定要素。この問題は、アンカー リンクをクリックすると固定要素が一時的に消えることで発生します。

根本原因

この問題の根本的な原因は、ページ上の要素が更新されたときにこれらのブラウザが再描画を処理する方法に起因すると考えられます。 。具体的には、再描画プロセス中に固定要素の位置が一時的に失われる可能性があります。

Chrome の解決策

Chrome でこの問題を解決するには、問題のある固定要素にtranslateZ(0) 変換を適用します。 。このアクションは 3D 変換を効果的にトリガーし、CSS スタックの残りの部分から再描画プロセスを分離することで、位置の問題を軽減します。

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

Opera ソリューション

Opera の場合は、少し異なるアプローチになります。が必要です。この場合、レイアウトには影響するが要素の外観には影響しないプロパティ (margin-bottom など) を継続的に再描画する CSS アニメーションを作成できます。このアプローチは、Opera を騙して継続的な再描画を実行させ、固定要素の位置を確実に維持します。

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

#sidebar {
    animation: noop 1s infinite;
}

注

この解決策は確実ではなく、軽微な問題が発生する可能性があることに注意することが重要です。 Opera が固定位置を取り戻そうとするときにちらつきます。この制限は Opera が再描画プロセスを処理する方法に固有のものであり、視覚的なアーティファクトを完全に排除することが困難になります。

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