Css translate3d text blur bug, the solution

problem causes:

CSS transform translate3d causes blurred fonts, currently known bugs, chrome has not been resolved

When elements are rendered on the GPU, fonts are rendered in grayscale in Chrome 35+, and sub-pixel rendering remains unchanged in IE11 and FF30. If the parameter in the transform value function (such as translate3d(), scale(), rotate(), etc.) is non-integer, the font will be blurred.

 

For example: transform: translate3d(82.5px, 0px, 0px);

Since the value of x of translate3d is not an integer, the text is not clear, as shown in the figure:

 

Current disguised solutions:

transform: translate3d(82px, 0px, 0px);

All parameters can be solved using positive integers, as shown in the figure

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326094195&siteId=291194637