So I have built a site using Keith Clark's pure CSS parallax idea. And it looks good, but I'm curious if anyone has figured out how to allow inertial/momentum scrolling on iOS.
What I know so far:
Currently inertial/momentum scrolling doesn't work because essentially the whole page is held within a container with overflow-y:auto. So when you are scrolling on the page you are scrolling within a container.
On iOS you have to apply -webkit-overflow-scrolling: touch to allow anything that scrolls that isn't the viewport to have inertial/momentum scrolling.
If you add -webkit-overflow-scrolling: touch to .parallax then the entire parallax effect breaks.
example of that here
I've tried adding iscroll.js to the page but it also breaks the page by making the children within the .parallax container to scroll in a way that isn't proper. It makes the parallax layers move up and down relative to the viewport instead of he container.
Another problem that this causes which isn't as big a deal but would be nice to address here since it's related is that on iOS the page will never go into minimal-ui since that only happens when the viewport scrolls.
I've seen people ask about this on the blog post so I figured I could bring the same problems over to stackoverflow and see if anyone has any good ideas.
Thanks!