Chrome モーダル ボックスのフォントがぼやける理由とその修正方法

モーダル ボックスの Chrome フォントがぼやける: CSS 犯人は解決されました

Chrome ユーザーはモーダル ボックス内でフォントがぼやけることがありますが、IE やFirefox ではそれらがはっきりと表示されます。この不一致は、テキストのレンダリングに影響する特定の CSS プロパティが原因で発生します。

この問題は、モーダル コンテナに適用されるtransformプロパティ、つまりtransform:translateX(-50%)translateY(-50%)に起因します。この変換により、モーダルが幅と高さの半分だけ実質的に移動し、フォントがぼやけて見えるレンダリング異常が発生します。

この問題を解決するには、Y 軸変換から小さな値を減算して CSS を変更できます。 。マイナスの 50% 値から 0.5 ピクセルを引くことで、テキストのレンダリングがスムーズかつ鮮明になります。

修正されたコード スニペットは次のようになります。

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

このソリューションにより、モーダルが中央に維持されることが保証されます。ぼやけたフォントの問題を解決します。 CSS を微調整することで、Chrome ブラウザは他のブラウザと同じ明瞭さでモーダル ボックス内のフォントを表示できます。

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