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.

Answer 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;
}

Answer 2

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.

Answer 3

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>