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.82k stars 16.23k forks source link

Page width issues #308

Closed SimonFricker closed 9 years ago

SimonFricker commented 10 years ago

It seems that the right CSS animation classes are causing a double page width in Chrome for some reason.

Using animation class with Big at the end (such as fadeInUpBig) creates whitespace at bottom of homepage on Cashmere. Removing Right/Big animation classes fixes all issues in Chrome.

SimonFricker commented 10 years ago

The following code fixes this issue but its a far from perfect solution.

@-webkit-keyframes fadeInUpBig { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); } }

eltonmesquita commented 10 years ago

Please, see the issue https://github.com/daneden/animate.css/issues/242.

daneden commented 9 years ago

This happens because translating an element causes it to interfere with the document overflow, basically making the page wider or taller when animating using any of the xInBig or xOutBig animations. The simplest fix would be to apply a width of 100% to the body or html, as well as a hidden overflow on the x-axis.