Blurry font after animation in Safari
donaldhubduck opened this issue · 3 comments
Firstly! Big fan of AnimXYZ!
I just noticed when I tested in latest Safari that the text becomes blurry after an animation. If I remove the xyz-in class from the parent element which contains the xyz-in class, the child elements becomes sharp again. When using a chromium based browser the text stays sharp all the time.
In the screenshot below (safari blurry text.png) you can see all the text below the nav bar is blurry. All those text elements gets faded in when in viewport. In about 1 second after animation those text elements becomes blurry.
In the screenshot below (chrome not blurry.png) all the text elements stays sharp all the time.
In the screenshot below (safari fixed.png) you can see that I unchecked some css styles which the xyz-in class has applied. That seems to make the text sharp again.
My solution (hack) right now is to remove the xyz-nested class of all children elements after an animation has finished.
Otherwise I love the animxyz so far! :D
Hi donaldhubduck, thank you for your feedback and glad you're enjoying AnimXYZ!
I think the issue you are facing is a result of the way safari handles 3D transforms and perhaps a bug in how they handle animation-fill-mode. Essentially most browsers handle 3D transforms by taking a screenshot of the element, transforming the screenshot, and then restoring the element to its final state. Usually the blurry parts are only DURING the animation. However it seems the optimized screenshot is persisting after the animation is complete on safari. Not sure why this is the case but here are some things I would try:
-
for the elements that are blurry try giving them this CSS property:
animation-fill-mode: backwards !important; -
If that doesn't maybe try the solutions listed in the answer to this stackoverflow question: https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome
While it does say it fixes it for Chrome I just wonder if perhaps it helps for Safari too.
Let me know if either of those work! I would like to know so I can tell anyone else how to fix it or add info about the solution to the AnimXYZ documentation.
Wow! Thanks for the fantastic answer.
Your suggestion number 1 solved it for me!
for the elements that are blurry try giving them this CSS property: animation-fill-mode: backwards !important;
Amazing!! So glad it helped. Thank you for registering this issue, now people with a similar issue will know how to fix it. And please let us know of any bugs you encounter in the future. Happy coding.