Why Are Chrome Fonts Blurry in Modal Boxes?

Chrome Font Blurry in Modal Box

This issue arises when Chrome displays blurry fonts in a modal box, despite the font appearing clear in other browsers like IE and Firefox. Investigations revealed that the problem lies within the transform property in the CSS for the modal container.

The offending CSS rule is:

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

This rule is responsible for centering the modal box horizontally and vertically by translating it by 50% in both directions. However, in Chrome, this translation results in blurry fonts.

The solution is to modify the translateX() and translateY() values. By subtracting 0.5px from the translateY() value, the rendering issue can be resolved. Here's the corrected snippet:

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

This change will ensure that the modal is still centered accurately, while eliminating the blurry font rendering. It provides a cleaner solution compared to adjusting percentages or using JavaScript fixes.

Keep in mind that the CSS shown above is for the ".md-modal" class, and the blurry font issue may occur in other contexts where a modal box is used. In such cases, the same solution can be applied by editing the relevant CSS rule responsible for centering the modal.

The above is the detailed content of Why Are Chrome Fonts Blurry in Modal Boxes?. For more information, please follow other related articles on the PHP Chinese website!