iOS Safari touch events stop firing with 17.4.1

Question

We are experiencing a new issue in a codebase we've had for very long time relating to iOS Safari touch events. It is in our educational games that have drag-drop type functionality (dragging cards or puzzle pieces). This just began manifesting in 17.4.1 on several iPads of varying generations, and we have positive confirmation through testing this was not an issue with 17.3.1 or any previous version. Immediately upon upgrading to 17.4.1 the problem manifested. It also manifests in 17.5 beta.

We receive touchstart, touchmove and touchend events for a few user interactions, then after a touchend we do not receive any more touchstart events for a number of seconds. Interacting with Safari directly (like scrolling the tabs, etc) typically results in the next touch to the page working again. This is a very low-level issue where handler functions are simply not fired by the browser. It happens after some random number of touch interactions - sometimes after just one or two, other times it may take dozens to trigger.

Interestingly, when the touch events happen on the canvas in areas that we do not care about, and thus we do not do any drawing in response, the issue does not manifest and they always fire. If we draw in response (indirectly - see below) then after a some random number of touchstart and touchend interactions it stops.

We can render either WebGL or directly to the canvas, and regardless of which method we use the problem manifests.

All rendering is decoupled from the actual touch events - we do all drawing via requestAnimFrame and only draw "dirty" or changed areas of the canvas.

Is anyone else experiencing a similar issue where touch events stop working after a few interactions with 17.4.1?

So far this has manifested on:

• iPad 6th generation
• iPad 9th generation
• iPad Pro 4th Generation (M2)
• iPhone 13 Pro

Answer 1

We've found a workaround for this. Our event handlers were attached to a canvas (or experimentally a div covering the entire page), and these would manifest the issue where we stopped receiving touch events.

Attaching the events directly to the document.body is resulting in uninterrupted events. I suspect part of this bug has to do with the fact that we have multiple layers of canvases on top of one another, and for some reason something is grabbing up input that shouldn't in specific cases.