css translateZ makes elements blurry

Question

Here's a reproduction of my issue (codepen because apparently stackoverflow's iframe affects the rendering somehow):

https://codepen.io/Ironimus/pen/GRjxpXZ

When using transform: translateZ and perspective inner elements' edges and text become blurry. It works very differently in different browsers, too. In case it also depends on screen or OS, here are a few screenshots with descriptions:

In Google Chrome transform: scale(2) is fine. Text and inner elements become blurry depending on the width of the element with perspective, and it follows very strange logic, when I set the width to 847px or higher it breaks, lower looks ok:

In Mozilla Firefox text becomes blurry if perspective/translateZ combination is used, inner elements are fine, transform: scale(2) is ok as well. width doesn't seem to affect anything:

In Safari everything is hella blurry whatever I do:

Why is it blurry at all and how do I make it right? Using transform: scale(2) for everything isn't a viable option. Are there maybe some rules I should follow to help browsers render 3D transforms with text right?

Supporting Safari isn't a priority but would still be nice

Answer 1

Have you tried adding a custom -webkit to the browser?

Answer 2

I am probably late with this answer but I recently encountered the same behavior when implementing a parallax design for a website. This is a problem related to text being rendered as bitmaps in Safari, which are not re-rendered on transform: scale(x); but instead blown up in size. It is possible to manually trigger a re-render of the text in some cases, however this is very finicky and there's no guaranteed way to make it work. A more comprehensive answer to this was provided by Jack in this thread: Transform scale() Safari bug when used on elements with border