Why Are Chrome Modal Box Fonts Blurry and How to Fix Them?

Chrome Font Blurry in Modal Box: CSS Culprit Resolved

Chrome users may encounter blurry fonts within modal boxes, while other browsers like IE and Firefox display them clearly. This disparity arises due to a specific CSS property that affects text rendering.

The issue stems from the transform property applied to the modal container, namely transform: translateX(-50%) translateY(-50%). This transformation effectively moves the modal by half its width and height, causing a rendering anomaly that makes fonts appear blurry.

To resolve this issue, the CSS can be modified by subtracting a small value from the Y-axis transformation. By subtracting 0.5px from the negative 50% value, the text rendering becomes smooth and crisp.

The corrected code snippet would be:

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

This solution ensures that the modal remains centered while eliminating the blurry font issue. By fine-tuning the CSS, Chrome browsers can display fonts in modal boxes with the same clarity as other browsers.

The above is the detailed content of Why Are Chrome Modal Box Fonts Blurry and How to Fix Them?. For more information, please follow other related articles on the PHP Chinese website!