Javascript touch event not fired when clicking repeatedly in standalone PWA on iOS-CodePudding

EDIT: It turns out that using ontouchstart wasn't the right solution. Using FastClick.js solves this issue.

I have the following code in a PWA app where a div changes color when clicked. (ontouchstart is used to remove the 300ms delay on click events).

<html>
<head>
  <style>
  #click {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  #click:active {
    background-color: red;
  }
  </style>
</head>
<body ontouchstart="">
  <div id="click"></div>
</body>
</html>

This works perfectly in the Safari browser on iOS 16.1.1. However when the PWA is installed in standalone mode, touch events are not triggered on repeated clicks.

Here are screenshots of me clicking at the same speed, where every other event is not fired on the installed PWA.

Run from Safari Run when installed

This also happens when running in the iPhone simulator.

Do you have any idea on how this could be mitigated ?

It appears as though touch events are not triggered when they are too close to each other. It could be a bug from Apple or there could be a settings that I am unaware of that would allow such behavior.

CodePudding user response：

The issue of Javascript touch events not firing when clicking repeatedly in a standalone PWA on iOS is a known issue.

It is caused by a bug in the WebKit framework, which is used by iOS to render web content.

To work around this issue, you can add a setTimeout function to the touch event handler to ensure that the event is fired after a certain amount of time.

Additionally, you can use the FastClick library, which is designed to eliminate the 300ms delay that occurs between a physical tap and the firing of a click event on mobile browsers.

Hope I could help!