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

Mary-Kate Olsen
リリース: 2024-11-12 13:44:02
オリジナル
690 人が閲覧しました

Why Is My Chrome Font Rendering Blurry in a Modal Box and How Can I Fix It?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート