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

javascript ios safari classname touchmove
Hilton Campbell picture Hilton Campbell · May 7, 2012 · Viewed 16.7k times · Source

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

rje picture rje · Jun 1, 2012

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.

Related questions

Prevent orientation change in iOS Safari

Is it possible to avoid transition to landscape view in Safari for iOS when the device is rotated? iOS Safari has the "orentationchange" event, I tried to intercept it and disable the default behavior, like this: <html> <…

Read More
Array state will be cached in iOS 12 Safari. Is it a bug or feature?

Update at 2018.10.31 This bug has been fixed in iOS 12.1, have a good day~ I found a problem with Array's value state in the newly released iOS 12 Safari, for example, code like this: <!DOCTYPE html> <html> <…

Read More
Programmatically selecting text in an input field on iOS devices (mobile Safari)

How do you programmatically select the text of an input field on iOS devices, e.g. iPhone, iPad running mobile Safari? Normally it is sufficient to call the .select() function on the <input ... /> element, but this does not …

Read More