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

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