JavaScript DOM changes in touchmove delayed until scroll ends on mobile Safari

Question

In mobile safari, in the course of handling touchmove for an element, I change the className of that element. Unfortunately, the visual change does not occur while the user is scrolling, or until the very end of an inertial scroll.

What can I do to get the className to visually take immediately?

More: Apparently this isn't limited to className changes, but seemingly any change to the DOM, such as innerHTML and style.

Answer 1

I actually built that site, and yes the way to get around this limitation is to not scroll the site using the built in browser functionality but fake it. The JS listens to scroll wheel and keyboard events and tweens the css top property of the main container to its own 'scrollTop'. The scrollbar on the right is of course a custom JS one. In this case its synced to the same internal 'scrollTop' value.

The whole site is just one big tween really, with the main timeline being its scrollTop position, and all the sub animations being triggered at certain times. The JS isn't minified so take a look in the ScrollAnimator.js file, its all there.

Answer 2

This is by design unfortunately. iOS safari will queue up all DOM manipulation until the end of a scroll or gesture. Effectively the DOM is frozen during a scroll.

I thought I could find a reference to this on an apple developer page, but I can only find this link to jQueryMobile: http://jquerymobile.com/test/docs/api/events.html.

Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts

Hope this helps!

Answer 3

Simply change position to -webkit-sticky. Do not set top so it will look just like a normal element, but performs like a fixed element. And you can update its style except position immediately.