ホームページ  >  記事  >  ウェブフロントエンド  >  Chrome モーダルでフォントがぼやけるのはなぜですか?どうすれば修正できますか?

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

DDD
DDDオリジナル
2024-11-12 11:27:02642ブラウズ

Why Are Fonts Blurry in Chrome Modals, and How Can I Fix It?

Chrome のフォントのぼやけ

その魅力にもかかわらず、Chrome ユーザーは、特にモーダル ボックスでフォントがぼやけて見える問題に遭遇することがあります。この異常は IE や Firefox などの他のブラウザでは明らかではありませんが、Chrome ではこの当惑させる動作が見られます。

さらに詳しく調べるために、ユーザーは「Start」という名前のラベルに関連付けられた CSS を調べました。彼らは、ぼやけた外観の原因となっている CSS ルールに気付きました。

.md-modal {
    transform: translateX(-50%) translateY(-50%);
}

このルールは、モーダル要素を画面の中央に配置します。ただし、これを削除すると、モーダルの中心位置が失われます。

解決策

幸いなことに、Y 軸の値をわずかに調整することで解決策が見つかりました。変換プロパティで。ユーザーは、translateY(-50%) を使用する代わりに 0.5px を減算し、次のようになりました。

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

この微妙な変更により、モーダル要素の望ましいセンタリングを維持しながら、フォントのぼやけが解決されました。このアプローチは、パーセンテージの変更や JavaScript の回避策の採用と​​比較して、よりクリーンで簡単なソリューションを提供します。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。