touchmove Event not firing on iPhone Safari

Question

Does the touchmove event NOT work on the iPhone's Safari browser?
I'm not talking about an iOS App, just a regular old HTML page with some Javascript and jQuery that's loaded into the iPhone's Safari Browser.

I actually connected my iPhone to my Mac-mini - which is also running Safari, so I can see everything that's happening on the iPhone in the Mac-Mini's Safari console - and my touchstart and touchend events DO fire, but touchmove just does NOT respond.

Here's the code:

        document.addEventListener("touchstart", onMobileTouchStart, false);
        document.addEventListener("touchmove", onMobileTouchMove, false);
        document.addEventListener("touchend", onMobileTouchEnd, false);


        function onMobileTouchStart(touchStartEvent) {
            console.log("\n==>'onMobileTouchStart'!!!");            
            touchStartEvent.preventDefault();
        }


        function onMobileTouchMove(moveEvent) {
            console.log("\n==>onMobileTouchMOVE'!!!");          
            moveEvent.preventDefault();
        }


        function onMobileTouchEnd(touchEndEvent) {
            console.log("\n==>onMobileTouchEnd'!!!");
        }

What I'm ultimately trying to do is get a custom pinch-zoom type behavior going, and my understanding is that this has to be implemented in the touchmove event - so that's why I'm asking.

I can't see any other way of tackling this unless touchmove starts playing nicely.

Any thoughts, tips or workarounds for this?

Answer 1

I see the same problem in May 2021. I get the touchmove events just fine if i try it on Google Chrome, but Safari, on 14.4.2 (latest version), the Safari browser gives me the initial touchdown event, but subsequent touchmove events are not being fed to me.

Clearly the browser is stealing the touchmove event, because it wants to scroll something, and as usual scrolling is fouling up everything, because it is one of these things that HTML / JS spec doesn't really cover, as it is magical browser behavior.

I have a overflow:hidden on my body tag, so there shouldn't be any scrolling anyway. Not sure how to fix this browser quirk, since the iPad is a massively popular device, i must figure out how to fix it, but i am baffled at the moment.