Why does WebKit text blur when using CSS scale and translate3d?

WebKit Text Blurring with CSS Scale and Translate3D

Developers encounter an issue where text rendered in Chrome and other WebKit browsers becomes excessively blurry when CSS scaling (scale or scale3d) is combined with translate3d transformations. This can be observed in a simplified example:

<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner {
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

Workaround:

Addressing this issue requires a unique approach as WebKit treats 3D transformed elements as textures rather than vectors. To resolve the blurring, increase the text size and downscale the element, effectively creating a higher resolution texture.

An updated example with this workaround:

<div class="test">
  <div class="testInner">

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
  filter: scale(0.8);
}

While this approach effectively reduces the blurring, it may still exhibit some antialiasing issues. To mitigate this, text shadow can be added to enhance the text's appearance.

The above is the detailed content of Why does WebKit text blur when using CSS scale and translate3d?. For more information, please follow other related articles on the PHP Chinese website!