Why Is My Chrome Font Rendering Blurry in a Modal Box and How Can I Fix It?

Chrome Font Rendering Blur Solved: CSS Culprit Identified

The age-old issue of blurry fonts in Chrome has plagued users for years, with endless debates about its cause. In this instance, the user encountered severe blurring within a modal box in Chrome version 39.

A thorough inspection of the provided CSS code suggests that the cause lies within the CSS property responsible for positioning the modal box. Specifically, issues arise with the 'transform' property setting the Y-axis translation:

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

This particular setting caused the text within the modal to appear blurry. By experimenting with the value, the user discovered that subtracting 0.5px from the Y-axis translation solved the problem.

The updated CSS:

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

This modification effectively sharpens the font rendering, resolving the blurring issue without altering the alignment of the modal box. The user notes that this solution is more elegant than adjusting the percentage value or relying on JavaScript.

The above is the detailed content of Why Is My Chrome Font Rendering Blurry in a Modal Box and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!