search

yuanyan / boron

A collection of dialog animations with React.js
https://yuanyan.github.io/boron
MIT License
1.48k stars 153 forks source link

forced use of translate3d causes css blurriness #21

Open justin-hackin opened 8 years ago

justin-hackin commented 8 years ago

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.

screenshot from 2016-02-22 15 04 26 screenshot from 2016-02-22 15 03 23

justin-hackin commented 8 years ago

It is much more pronounced on my screen than in the screenshots ...

justin-hackin commented 8 years ago

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

ahmedlhanafy commented 8 years ago

+1

alanqthomas commented 7 years ago

+1

ghost commented 7 years ago

I have the same problem but the solution seems inconsistent. In some situations it removes the blur, but sometimes it doesn't. For example:

image