Why Does -webkit-transform: translate3d Cause Blurry Text in WebKit-Based Browsers?

Blurry Text Post-Animation in WebKit-Based Browsers Through Translate3d

Certain animations implemented using -webkit-transform: translate3d in WebKit-based browsers, such as the iPhone, can result in blurry or distorted text. This issue stems from the browser's rendering engine, and remains persistent despite attempts to mitigate it through CSS workarounds like removing relative positioning or applying -webkit-font-smoothing: antialiased.

While JavaScript-based animation methods resolve this issue, they hinder performance on WebKit-enabled devices. To circumvent the problem without sacrificing speed, a workaround involves altering the transform values slightly:

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);

This fractional offset effectively eliminates the blurriness, while maintaining the performance benefits of translate3d animation.

The above is the detailed content of Why Does -webkit-transform: translate3d Cause Blurry Text in WebKit-Based Browsers?. For more information, please follow other related articles on the PHP Chinese website!