JavaScript Dom Changes in Touchmove Delayed Until Scroll Ends on Mobile Safari

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

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!

Can't prevent `touchmove` from scrolling window on iOS

I recently ran into this same problem. You'll need to pass { passive: false } when registering the touchmove event listener. e.g.

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, { passive: false });

This is because document touch event listeners are now passive by default in Safari 11.1, which is bundled with iOS 11.3. This change is documented in the Safari 11.1 release notes:

Web APIs

• [...]
• Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes.

Eliminate 300ms delay on click events in mobile Safari

Now some mobile browsers eliminate 300 ms click delay if you set the viewport. You don't need to use workarounds anymore.

<meta name="viewport" content="width=device-width, user-scalable=no">

This is currently supported Chrome for Android, Firefox for Android and Safari for iOS

However on iOS Safari, double-tap is a scroll gesture on unzoomable pages. For that reason they can't remove the 300ms delay. If they can't remove the delay on unzoomable pages, they're unlikely to remove it on zoomable pages.

Windows Phones also retain the 300ms delay on unzoomable pages, but they don't have an alternative gesture like iOS so it's possible for them to remove this delay as Chrome has. You can remove the delay on Windows Phone using:

html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}

Source: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

UPDATE 2015 December

Until now, WebKit and Safari on iOS had a 350ms delay before single taps activate links or buttons to allow people to zoom into pages with a double tap. Chrome changed this a couple of months ago already by using a smarter algorithm to detect that and WebKit will follow with a similar approach. The article gives some great insights how browsers work with touch gestures and how browsers can still get so much smarter than they are today.

UPDATE 2016 March

On Safari for iOS, the 350 ms wait time to detect a second tap has been removed to create a “fast-tap” response. This is enabled for pages that declare a viewport with either width=device-width or user-scalable=no. Authors can also opt in to fast-tap behavior on specific elements by using the CSS touch-action: manipulation as documented here (scroll down to the 'Styling Fast-Tap Behavior' heading) and here.

iphone's safari touchmove event not working

Try using e.originalEvent.touches:

$('#movieShow').bind('touchmove',function(e){
    e.preventDefault();

    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    console.log(touch.pageX);
});

I ran into a similar problem when I was playing around with touch events and jquery: http://xavi.co/articles/trouble-with-touch-events-jquery

Safari in ios8 is scrolling screen when fixed elements get focus

This is now fixed in iOS 10.3!

Hacks should no longer be needed.

iPad Safari scrolling causes HTML elements to disappear and reappear with a delay

I was using translate3d before. It produced unwanted results. Basically, it would chop off and not render elements that were offscreen, until I interacted with them. So, basically, in landscape orientation, half of my site that was offscreen was not being shown. This is a iPad web application, owing to which I was in a fix.

Applying translate3d to relatively positioned elements solved the problem for those elements, but other elements stopped rendering, once offscreen. The elements that I couldn't interact with (artwork) would never render again, unless I reloaded the page.

The complete solution:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

Now, although this might not be the most "efficient" solution, it was the only one that works. Mobile Safari does not render the elements that are offscreen, or sometimes renders erratically, when using -webkit-overflow-scrolling: touch. Unless a translate3d is applied to all other elements that might go offscreen owing to that scroll, those elements will be chopped off after scrolling.

_{(This is the complete answer to my question. I had originally marked Colin Williams' answer as the correct answer, as it helped me get to the complete solution. A community member, @Slipp D. Thompson edited my question, after about 2.5 years of me having asked it, and told me I was abusing SO's Q & A format. He also told me to separately post this as the answer.
@Colin Williams, thank you! The answer and the article you linked out to gave me a lead to try something with CSS. So, thanks again, and hope this helps some other lost soul. This surely helped me big time!)}

iOS Disable Page Scrolling with overflow-scrolling: touch

Try swapping around the logic in your window and scrollable element listeners like so:

// window or document
window.addEventListener("touchmove", function(event) {
  if (!event.target.classList.contains('scrollable')) {
    // no more scrolling
    event.preventDefault();
  }
}, false);

// No special listeners needed on .scrollable elements

This way, you only prevent default when trying to scroll non-scrollable elements.

You will still have a problem that at the top/bottom of the scrollable content starting a drag can cause the whole app to "bounce". To fix this problem, see Joe Lambert's ScrollFix.

---

Related Topics