3

I have an app that has tons of popups, and I position them like this:

.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

but some popups are blurry. This transform: translate is whats killing it. As far as I know this is chrome problem, but what is the best way to fix it?

Nemanja G
  • 1,760
  • 6
  • 29
  • 48

2 Answers2

8

This is not a bug in your code, this is well known Webkit rendering bug. See for example: https://support.mozilla.org/pl/questions/1075185 (and many more threads on FF support forums).

In both Chrome and FF, in advanced browser settings you can turn off what is called "hardware acceleration". This setting exists to let your hardware "help out" browser when in comes to advanced graphics rendering. Hardware acceleration automatically turns on for elements that you use translate and some other rules on. This is actually sometimes used by inexperienced "super css hackers" to achieve some better/clearer rendering in some cases.

But sometimes it causes more bad than good and this is your case. Once you turn hardware acceleration off in your browser the font is perfectly clear. Sadly there's no real solution code-wise, you can't force turning it off for a given element. We are dependent on Webkit developers fixing the rendering engine here. You can only hack around, like for example change font size to one which for no real reason renders better. Or change positioning in some way which doesn't involve translate. Best of luck to you.

Robert Williams
  • 1,370
  • 1
  • 17
  • 38
0

you can try this in your .css :

.myfont{
-webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
Anna
  • 2,988
  • 3
  • 15
  • 29
Guillaume Deschamps
  • 1
  • 2