html - ページは、スクロール後にナビゲーションバーでさまざまなフォントの太さをレンダリングします

Question

うまくいけば、誰かが私がこれを理解するのを手伝ってくれるでしょう。私は数え切れないほどのことを試しましたが、これを理解できないようです。

グーグルクロームを使用して、これは私が見るものです。注目すべき部分は、ナビゲーションバーのアイコンです。

一番下までスクロールしました：

ご覧のとおり、フォントの太さは完全に異なり、スクロールするだけで影響を受けます。この動作は、現在23.0.1271.95（最新）を実行しているOSX上のChromeでのみ発生するようです。

フォントに重みを強制しようとしましたが、！importantもあります。これにより重みが変更されますが、スクロールするとすぐに、明らかな理由もなく重みが下がります。この問題の原因となる可能性のあるヒント、およびWebサイトがどこでも適切にレンダリングされるようにするために、これを修正する方法についてのヒントはありますか？

Answer 1

テキストをスクロールした後、ブラウザがサブピクセルフォントのアンチエイリアスを無効にしている可能性があります。これは、CSS変換、透明度など、あらゆる種類の可能性があります。OSXでは、テキストの太字が大幅に少なくなります（詳細については、ブラウザのフォントに不要な太字を追加してください） 。

解決策は、サブピクセルフォントのアンチエイリアスを先制的に無効にすることです。これをナビゲーションバーのCSSに適用します。

#navbar {
  -webkit-font-smoothing: antialiased;
}