Why Does Webkit-Based Text Become Blurry After Translate3d Animation?

Webkit-Based Text Distortion Post-Animation with Translate3d: A Persistent Issue

The issue of blurry or distorted text after animating elements using Webkit-based browsers has plagued developers for an extended period. This issue affects browsers like Safari and the iPhone's default browser.

Background:

JavaScript-based sliders often utilize the -webkit-transform: translate3d property for smooth animation. However, this technique inadvertently causes text within the animated element to become blurry.

Failed Attempts at Resolution:

Various workarounds have been attempted to resolve this issue, including:

• Removing relative positioning
• Adding -webkit-font-smoothing: antialiased

However, these measures have proven ineffective.

Solution:

Despite exploring various options, the only solution that consistently eliminates text blurring is to revert to JavaScript-based animation, bypassing translate3d altogether. However, this compromise sacrifices performance on WebKit-enabled devices.

A Partial Solution:

While a comprehensive solution remains elusive, a partial remedy has been discovered that mitigates the distortion somewhat:

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

This technique introduces a slight offset of 0.1% to the element's position and transform. While it does not fully eliminate the blur, it significantly reduces its impact.

The above is the detailed content of Why Does Webkit-Based Text Become Blurry After Translate3d Animation?. For more information, please follow other related articles on the PHP Chinese website!