モーダル ボックスで Chrome フォントのレンダリングがぼやけるのはなぜですか?どうすれば修正できますか?

Chrome フォントのレンダリングのぼかし解決: CSS 犯人特定

Chrome のフォントがぼやけるという古くからの問題は、ユーザーを長年悩ませてきました。その原因をめぐる終わりのない議論。この例では、ユーザーは Chrome バージョン 39 のモーダル ボックス内で深刻なぼやけに遭遇しました。

提供された CSS コードを徹底的に検査したところ、原因はモーダル ボックスの配置を担当する CSS プロパティ内にあることが示唆されました。具体的には、Y 軸の移動を設定する「transform」プロパティで問題が発生します。

transform: translateX(-50%) translateY(-50%);

この特定の設定により、モーダル内のテキストがぼやけて表示されます。値を試してみると、Y 軸の移動から 0.5 ピクセルを減算すると問題が解決することがわかりました。

更新された CSS:

transform: translateX(-50%) translateY(calc(-50% - 0.5px));

この変更により、フォントのレンダリングが効果的にシャープになります。モーダル ボックスの配置を変更せずにぼやけの問題を解決します。ユーザーは、このソリューションはパーセンテージ値を調整したり JavaScript に依存したりするよりも洗練されていると述べています。

以上がモーダル ボックスで Chrome フォントのレンダリングがぼやけるのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。