Mobile Safari Scrolling Moment Not Working

Question

I currently have a problem with a responsive site.

All but one of the pages do not receive the scroll momentum that you usually get from using the Internet on your phone. I'm not sure if this is limited to mobile safaris or other mobile browsers. I just started working with this site.

But does anyone know why some pages cannot scroll? Some pages are pretty heavy with images and a bit of jQuery, but I don’t think there is enough to cause processing problems.

Any ideas?

Link to dev: apt.codeplayground.co.uk .

[EDIT]

There seems to be a problem with our .wrapper div, since it was not included on the page that worked, now we turned it on, scrolling does not work properly.

Answer 1

I had the same problem. I found this link that solved the problem.

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

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

Answer 2

Only the body receives a natural scroll. Any items having an overflow scroll are very slow. touch scrolling can fix this, but it's better to let the body scroll if possible. It is much faster and much better using the texture of the GPU.

Tap scroll to take a snapshot of the scrollable item when you start scrolling. It adds this image as a GPU texture, and then when you stop scrolling, it destroys the GPU texture. By allowing the body to scroll, it is better to use a memory texture, and this is usually the best solution.

Answer 3

Along with what @Mark said about the css property, we must remember that this property needed to be provided to the parent scrollable content.

The impulse value can work on the container necessary to scroll through the contents. Not directly from the content, otherwise he simply cannot understand how and why to give an impetus.

 .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>