Search code examples
htmlcsswebkitparallax

Sticky scrolling issue on mobile


I'm making a parallax effect using CSS perspective which seems to be the only way to create a performant parallax on mobiles. The scroll area is in a box that's scrollable inside (which is the size of the screen) and the parallax works however, on my ipad its very sticky when it scrolls (can't 'flick' the screen and it scrolls when you let go) as per this post. The solution is this CSS on the container:

 -webkit-overflow-scrolling: touch;

This restores the ability to 'flick the screen' and it scrolls after letting go. However it flattens the perspective again and no parallax anymore. What would be a way to keep the perspective and scroll normally on mobiles?? Seems like there is just no good way to parallax on ipads/mobiles?


Solution

  • A better way would be to use a background-image and perspective