Scrolling Slow on Mobile/iOS When Using Overflow:Scroll

Scrolling slow on mobile/ios when using overflow:Scroll

Rather than a performance issue this is likely that your not seeing 'Momentum' scrolling on your iOS device

This can be solved by adding '-webkit-overflow-scrolling:touch' to your scrolling element i.e:

.scrolling-content {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   height:100%; /*A value other than height:auto needs to be set*/
}

By default iOS devices use 'momentum' scrolling on the body but adding 'overflow-y:scroll' to an element does Not set a element to 'momentum' scrolling by default

See https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling for more info

Note: there's a number of Gotcha/Bugs with using -webkit-overflow-scrolling: touch on certain browsers

Scrolling on mobile (iOS) causes lag, browser address bar behaves weirdly (hides and reappears)

Okay, it seems it's all caused by the elements containing the content having a fixed size, filling the whole screen (in this case, #main is 100vw * 100vh) and with overflow: hidden. When you scroll, the content inside #main moves, but the document itself doesn't, since it's not larger than the viewport. That's why the address bar never moves either.

I managed to fix the issue on a different website, but unfortunately, due to the structure of my homepage (which I linked in the question), I don't see how I could change it there. If someone has an idea, please feel free to share!

Scrolling Slow on mobile version of site

When I checked the site on my Nexus 6P it was smooth. So I can't recommend anything specific, but here are some things to look for:

1) Any JavaScript running on an scroll event has a serious potential to slow your site down

2) Certain CSS properties can cause some slowdown (box-shadow can be a serious offender)

Looking at Chrome dev tools shows your scrolling to be quite performant. I also don't see any JavaScript running in the scroll event.

How to prevent scroll lag on Safari Mobile (iPad)?

Ok, thanks to the iScroll4 plugin I got a new trick for iPad Web Developpers.
Apparently it works way better with this CSS :

overflow-y: scroll;
overflow-x: hidden; 
-webkit-overflow-scrolling: touch;

While this lag like hell :

overflow: auto;

IOS -webkit-overflow-scrolling scrolls on wrong axis, or not at all

I also have struggled with this bug for months. The best characterization that I've found is:

https://bugs.webkit.org/show_bug.cgi?id=87391

which says that it happens when the page has an iFrame and the contents are set from Javascript. My current workaround in The Graphics Codex version 1.6 is to use iScroll4 to explicitly scroll the page rather than using touch scrolling. Because Javascript is single-threaded, this can be slow if you're also performing animations or background loading content.

How to enable smooth scrolling on mobile iOs?

Unfortunately Smooth Scrolling is not possible in Safari on OSX and iOS natively. But there are some JavaScript polyfills for that. For example: https://github.com/iamdustan/smoothscroll
You have to initialize it with JavaScript, not with CSS.

---

Related Topics