Touch Event Propagation Issue on iPhone / mobile-iOS Safari

[Triex]

I am experiencing an issue with driver.js specifically on iPhones, where touch events are propagating through the overlay, leading to unintended interactions with elements underneath.

Environment:

iPhone Model: iPhone 13 Mini / iPhone 12 Pro Max iOS Version: 17.1.2

For UI I'm using chakra-ui w/ next, the issue is happening with useDisclosure but seems like something worth mentioning if it's more widespread.

Expected Behaviour:

It continues through the walkthrough process without pressing links or elements underneath

Actual Behaviour:

It presses the DOM underneath the overlay when touching the prev/next buttons, or anywhere in the .driver-popover.

Workaround Implemented:

For ref, I have temporarily mitigated the issue with a touch event handler:

useEffect(() => {
    const globalTouchHandler = (e: any) => {
      if (document.querySelector(".driver-popover")) {
        e.stopPropagation();
        e.preventDefault();
        e.stopImmediatePropagation();
      }
    };

    document.addEventListener("touchstart", globalTouchHandler, true);

    return () => {
      document.removeEventListener("touchstart", globalTouchHandler, true);
    };
  }, []);

[Triex]

Also noting: it's not reproducible with browser devtools mocking an iPhone - the issue only happens on an actual device.

edit: Tried to make a minimum reproducible example but didn't run into it with the CDN version. May go further later.