How to fix Skrollr on Mobile?

Question

I have followed the guidelines for mobile browser support by wrapping the content in a after and before the body tags.

Explination is here: https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers

The site still wont allow the page to scroll on an iPad however. I'm not sure why. Any code sleuthing would be much appreciated.

Site with code is http://bit.ly/1rr6zGA

Answer 1

You need to wrapp all your content in a element with the ID of skrollr-body. All elements that is not position:fixed; in your css goes inside the skrollr-body element.

From Skrollr website:

Starting with skrollr 0.6.0 there's just one thing you need to do: Include an element on your page with the id skrollr-body. That's the element we move in order to fake scrolling. The only case where you don't need a #skrollr-body is when using position:fixed exclusively. In fact the skrollr website doesn't include a #skrollr-body element. If you need both fixed and non-fixed (i.e. static) elements, put the static ones inside the #skrollr-body element.

Or to put it differently: On mobile the skrollr-body element is moved using CSS transforms. You can't have position:fixed or background-attachment:fixed inside elements which use CSS transforms as per CSS spec (http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/). That's why those elements need to be outside of the skrollr-body element.

Answer 2

I can confirm that you need to wrap the content you want to scroll in #skrollr-body. Just adding a div with id=skrollr-body won't work. My page wouldn't scroll otherwise on mobile.