Browser scroll event doesn't fire often enough on iOS and Android devices Browser scroll event doesn't fire often enough on iOS and Android devices android android

Browser scroll event doesn't fire often enough on iOS and Android devices


Pre-iOS 8:

It's not an issue of the scroll event being fired enough. Instead, browsers on iOS stop refreshing (i.e. "repainting") the screen while in the middle of a scroll gesture.

Safari WebKit, which is the HTML rendering component that is mandatorily used in all iOS browsers per Apple's policy, halts repainting during scroll gestures to conserve battery life and reduce heat. Note that JavaScript does continue to function normally in the background during a scroll gesture, even if the screen can't reflect any real-time changes that were made to the DOM during a scroll gesture. As soon as the gesture ends, a paint event is immediately fired, and the screen updates. However, timer loops, such as those that are setup via setInterval, do not fire during scroll gestures.

It's also worth noting that if you move your fingers very slowly when initiating a scroll, the scroll gesture doesn't take effect until after you've moved your finger approximately 10 pixels away from its starting position. During movement within this 10-pixel radius, the screen continues to be refreshed instantaneously. The moment that WebKit decides that your finger has moved far enough to initiate scrolling, screen refreshes are disabled until the scrolling gesture ends.

The reason this problem doesn't affect "some" web pages or JavaScript libraries is that they effectively "freeze" the page's scrolling, and instead emulate scrolling by intercepting touch events and then adjusting the body.scrollTop property accordingly. They freeze the page's scrolling by attaching an event handler to the onscroll event, and issue an event.preventDefault() command from within the event handler.

iOS 8 and later:

Apple is making the scroll event more fluid in iOS 8:

http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/


On my side, I disabled the feature for ios Chrome

// Fix Chrome iOSif(!navigator.userAgent.match('CriOS')){    // do my stuff here      }

I don't know the complete list of navigators that don't refresh the screen on scroll. If anyone can help ;)