私がローカルで作業しているサイトには、固定ナビゲーション バーと、その下に高さ 500 ピクセルの html5 ビデオ要素が含まれています。ナビゲーション バーのメニュー項目には、フォントの太さの削減または何らかの種類の -webkit-font-smoothing: の問題のように見えるものがありますが、ビデオがスクロールされてナビゲーション バーを通過した後にのみ、ビデオ上でフォントが正しい太さに戻ります.
これは chrome でのみ発生しており、Safari でも発生していましたが、font:100%; を使用して修正できました。
私は一日中答えを探していたので、どんな助けや提案も大歓迎です。どうもありがとう。
Webkit では、特に JS でページ上で一度に多くのことが起こっている場合、要素をリアルタイムでレンダリングする際に問題が発生することがあります。これを CSS の「スティッキー」ナビゲーションの親要素に追加します。
/* Change this to your selector */
.someStickyNavParent {
-webkit-backface-visibility: hidden;
}
その要素の子でまだ問題が発生している場合は、いつでもユニバーサル セレクターを使用できます。
/* Change this to your selector */
.someStickyNavParent * {
-webkit-backface-visibility: hidden;
}
私も同じ問題に直面していますが、解決策はありません。
フォントを変更しようとしましたが、ビデオ要素をオーバーレイすると、テストしたすべてが異なる方法でレンダリングされます。-webkit-font-smoothing や -webkit-text-stroke などの Webkit css プロパティを使用した回避策でも成功しませんでした。
私が見つけたいくつかの検索を行ったので、それは Google Chrome に関する既知の問題のようです。