forced use of translate3d causes css blurriness
justin-hackin opened this issue · 5 comments
A well-known issues with translate3d is that it causes text to be blurred. See : http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d
Unfortunately, it seems that all of the transition modals, even if they don't need a 3d translate, have one. You can see a noticeable difference when I unchecked the transform style in one of these screenshots.
It is much more pronounced on my screen than in the screenshots ...
A workaround is to use ScaleModal add
'transform':'translate(-50%, -50%)'
into your modalStyle (assuming you want it centered) and this will break animations but at least it shows properly
+1
+1
I have the same problem but the solution seems inconsistent. In some situations it removes the blur, but sometimes it doesn't. For example:
