Mobile Safari scroll momentum not working

Question

I'm having a bit of an issue with a responsive site at the moment.

All but one of the pages don't get the scroll momentum you would normally get from using the Internet on your phone. I'm not sure if this is restricted to mobile safari or other mobile browsers, I've only just started the responsive work on this site.

But, does anyone know why some pages might not have scroll momentum? Some of the pages are quite heavy with images and a little jQuery, but I wouldn't think there's enough to cause rendering issues.

Any ideas?

The link to the dev site is: apt.codeplayground.co.uk.

[EDIT]

There appears to be a problem with our .wrapper div, as this wasn't included on the about page that was working, now we've included it the scroll doesn't work properly.

Solution 1

I just had the same problem. I found this link, which solved the issue.

Add this line of css to the element that scrolls: -webkit-overflow-scrolling: touch;

#element_that_scrolls
{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
}

Solution 2

Along with what @Mark have said, regarding the css property, we need to remember that this property needed to be given to the parent of the scrolled content.

Meaning momentum can work on the container of the needed to be scrolled content. Not on the content directly, otherwise he just can't understand how and for what to give the momentum.

.element_that_scrolls
{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
} 

//Wrong
<ul class="element_that_scrolls">
    ...
</ul>

//Correct
<div class="element_that_scrolls">
    <ul>
        ...
    </ul>
</div>

Solution 3

Only the body getting the native scrolling. Any elements that have overflow scroll are really slow. touch scrolling can fix that but it's better to let the body scroll if you can. It's much faster and uses the GPU texture compositing much better.

Touch scroll with create a snapshot of the scrollable element when you start scrolling. It adds that image to as a GPU texture then when you stop scrolling it destroys the GPU texture. Letting the body scroll uses your texture memory better and it usually the better solution.

Comments

[Mark]

How interesting. Can you give any sources for this info? I'd love to read more about that.

[puppybits]

If you have access to an apple developer account they have videos with some great details about how the browser works.

[puppybits]

I looked into the touch scrolling and it looks like it changed since iOS4. Scrolling on elements no long stops javascript execution and it doesn't cache a GPU texture. The textured are still created like normal elements. minus.com/lFZwnKxxBDDyA minus.com/lbc3H74BOvk4ey jsbin.com/AZiWowe/9

[Jonny]

Excellent, thank you! I had this issue with JQuery Mobile, iOS and infinite scrolling for which you have to set a height in order to make .scrollTop() working properly.