Why Does Text Blur When Using Translate3d and Scale3d in WebKit Browsers?

Blurry Text Conundrum: CSS Scaling and Translate3d in WebKit

WebKit browsers, including Chrome, exhibit a peculiar issue: text within CSS-scaled content becomes noticeably blurry when translate3d is simultaneously applied. This behavior is evident in the provided JS Fiddle example.

JS Fiddle Example:

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

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

<div class="test">
  <div class="testInner">
    This text becomes blurry in WebKit browsers when translate3d and scale3d are applied.
  </div>
</div>

Troubleshooting:

To mitigate this issue, it's recommended to:

• Increase Text Size: Increase the font size of the text to compensate for the blurring caused by scaling and translation.
• Downscale Element: Reduce the size of the containing element to fit the enlarged text. This essentially creates a higher resolution texture for the text, improving clarity.

Example:

/* Increase text size */
.testInner {
  font-size: 1.5em;
}

/* Downscale element */
.test {
  -webkit-transform: translate3d(0px, 100px, 0px) scale(0.8);
}

Note:

While this workaround addresses the blurring issue, it may still result in subpar antialiasing. To enhance readability, consider adding a slight text shadow to the text within the .testInner element.

The above is the detailed content of Why Does Text Blur When Using Translate3d and Scale3d in WebKit Browsers?. For more information, please follow other related articles on the PHP Chinese website!