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