search

animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
https://animate.style/
Other
80.72k stars 16.23k forks source link

Pulse animation bug #1570

Closed AlexRMU closed 2 years ago

AlexRMU commented 2 years ago

Describe The Bug

Pulse animation is used on one element on the page. When it starts, all the letters on the page seem to change the font, and return when it ends. There is nothing in css and if you zoom in, everything is fine.

Steps To Reproduce

No response

Expected Behavior

No response

Screenshots

image image

Desktop

Version: latest Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Smartphone

No response

Additional Context

Perhaps this is a browser bug.

warengonzaga commented 2 years ago

Any codepen or related to repreduce the issue?

AlexRMU commented 2 years ago

https://codesandbox.io/s/ecstatic-haslett-jietfo

AlexRMU commented 2 years ago

If you change the css a little, the error will disappear

warengonzaga commented 2 years ago

I see, it gitters @AlexRMU

eltonmesquita commented 2 years ago

This isn't exactly a bug, but a browser peculiarity related to animating/rendering elements. In the past, this sort of problem was massive and depending on the browser, it would make the pages unusable 😢. To make things bearable you'd have to resort to some nasty and crazy hacks. Things improved a lot and now everything is mostly stable in every browser out there, but we can still see some remaining issues from that time. This is one example.

There is nothing the library itself can do about this. It's a browser rendering issue and if it's getting in your way the best advice I can give is to do a good research about how browsers render pages and search for some "ancient" hacks on how to fix it. This probably won't have any serious side effect in any page anywhere, so I don't think there is much to worry about it.

AlexRMU commented 2 years ago

👍