CSS Animation Snags
I am addicted to CSS animations: they are lightweight, performant, and come in a very familiar syntax. Recently I have been experimenting with full-page animations and quickly realized that there are quick a few snags that can occur along the way. The following is what I learned.
One particular animation I was using would scale the page content up to mimic it ‘expanding’ into three dimensional space while simultaneously fading out. This animation was stored in a keyframe animation which was called via a CSS class, and applied to to the content area once the user clicks a specific element. This behaved exactly as you would expect, until I noticed that in Firefox it would trigger horizontal scrollbars!
The scrollbar was being caused by the animation, which in the course of scaling up the page content, would scale the content beyond the viewport. I remembered seeing this issue mentioned before, and quickly put into place a solution via CSS: 1) Apply 100% width and height, along with max-width and height to both the <HTML> and <body> tags. This is ensure that these elements extend the full width and height of the page. As a finishing touch, add in overflow: hidden, which will remove the scrollbars (both vertical and horizontal). 2) Next, wrap all of the page content in a wrapping element, which will receive absolute positioning, overflow: scroll (to add back in the ability to scroll the page content), and 100% width as well as height.
This did the trick, and I immediately saw that by triggering the page animation, no longer would I also trigger a horizontal scrollbar. Upon testing on mobile, the next snag reared it’s ugly head: the fix we put in place disabled momentum scrolling in mobile Safari. I have come to really enjoy this feature in Safari: not only does it make swiping through a web page on mobile feel very smooth, it also lends to a sense of perceived performance. Without it, scrolling the page on a touch device feels very rigid and forced. I had to find a solution to this!
After some research I discovered that this featured can be added in Android 3+ and iOS5+ via a new property called ‘overflow-scrolling’. To enable this, I simply had to add the following to the wrapping content element: -webkit-overflow-scrolling: touch. Upon applying this property, I immediately saw that page now had gained back momentum scrolling, but inherited some bugs in the meantime: the fixed header I had in place was now scrolling with the page, only to snap into place once scrolling has stopped. In addition to this I noticed that a new feature in iOS7 that minimized the browser when scrolling the page was now disabled.
After some research I discovered that this featured can be added in Android 3+ and iOS5+ via a new property called ‘overflow-scrolling’.
Ultimately, I decided to modify the page animation to no longer scale the content up, creating the illusion of it expanding towards the user, but instead scale down the content. By doing this, content would no longer extend beyond the viewport and therefore no longer trigger a horizontal scrollbar. This solution was a fair compromise as I still can have full-page animations while not losing the default behavior in cutting-edge mobile browsers.
