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

モーダル ボックスの Chrome フォントがぼやける

この問題は、他のウィンドウではフォントが鮮明に表示されているにもかかわらず、Chrome でモーダル ボックスにぼやけたフォントが表示される場合に発生します。 IEやFirefoxなどのブラウザ。調査の結果、問題はモーダル コンテナの CSS の変換プロパティ内にあることが判明しました。

問題のある CSS ルールは次のとおりです。

transform: translateX(-50%) translateY(-50%);

このルールは、モーダル ボックスを水平方向に中央揃えにし、両方向に 50% 平行移動して垂直方向に移動します。ただし、Chrome では、この翻訳によりフォントがぼやけてしまいます。

解決策は、translateX() と translationY() の値を変更することです。 translationY() の値から 0.5px を減算することで、レンダリングの問題を解決できます。修正されたスニペットは次のとおりです:

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

この変更により、ぼやけたフォント レンダリングを排除しながら、モーダルが正確に中央に配置されるようになります。これは、パーセンテージの調整や JavaScript 修正の使用と比較して、よりクリーンなソリューションを提供します。

上記の CSS は「.md-modal」クラス用であり、ぼやけたフォントの問題は他のコンテキストでも発生する可能性があることに注意してください。モーダルボックスが使用されます。このような場合、モーダルを中央に配置する関連の CSS ルールを編集することで、同じ解決策を適用できます。

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