Chrome モーダル ボックスでフォントがぼやけるのはなぜですか?

モーダル ボックスの Chrome フォントがぼやける: トラブルシューティングと解決策

Chrome モーダル ボックスのフォントがぼやける問題は、イライラさせることがあります。この問題は Chrome では発生するが、IE や Firefox などの他のブラウザでは発生しない可能性がありますが、根本的な原因はブラウザ自体ではなく CSS にあることがよくあります。

提供された CSS を調査すると、原因が CSS 内にあることが判明しました。モーダル ボックスのクラス:

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

モーダル ボックスを水平方向および垂直方向の中央に配置するこの変換により、フォントをぼかすレンダリング アーティファクトが導入されます。

この問題を解決するには、Y-軸の移動値は、0.5px を減算して調整する必要があります:

.md-modal {
    ...
    -webkit-transform: translateX(-50%) translateY(calc(-50% - .5px));
    ...
}

この変更により、モーダル ボックスが効果的にわずかに上に移動し、ぼやけたテキストの問題が解消されます。

注: CSS クラス名「.md-modal」はアプリケーションによって異なる場合があることに注意してください。ユーザーは、変換を定義する対応する CSS クラスを特定し、提案された調整を適用する必要があります。

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