JavaScript DOM changes in touchmove delayed until scroll ends on mobile Safari
classname, ios, javascript, safari, touchmove
Solution
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!
Problem
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`.