请教这个 Safari BUG 要怎么绕过？昨天浪费了我一天：双击的后一击被呑掉了!

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 799 天前的主题，其中的信息可能已经有所发展或是发生改变。

Bug 无数的 Safari 又来困扰我了，就是一个 PWA WebApp,在 safari 浏览器里正常，但一但添加到主屏幕后，双击的后一击就没有了。

打开网址：

https://www.oxyry.com/test/safari-double-tap-bug/safari-double-tap-bug.html

双击那块黑色块，会有二条 pointerdown 记录或 touchstart 记录，这很正常。但把这个网址添加个主屏幕作为 webapp 打开，双击就只有一击了？？？！！！ Safari 能不能别这么离谱。

我发现唯一的办法只有釜底抽薪，在 touchstart 里 preventDefault 彻底屏蔽点击事件，但这个办法明显不能用在正常 App 里，因为我 App 里还要用双击事件呢。

html 源代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
    <title>Safari double tap bug</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="manifest" href="manifest.json">

    <style>
      #rootEl {
        height: 70vh;
        overflow: auto;
        background: #000;
        color: #fff;
        /* touch-action: none; */
        user-select: none;
      }
    </style>
  </head>
  <body>
    <div>
      <div id="rootEl"></div>
      <p id="btns">
        <button id="clearBtn">Clear</button>
        <button id="reloadBtn">Reload</button>
      </p>
    </div>
    <script>
      clearBtn.onclick = () => { rootEl.innerHTML = ''; }
      reloadBtn.onclick =  () => { location.reload(); }

      const log = (msg) => {
        const m = document.createElement('div')
        m.textContent = msg
        rootEl.appendChild(m)
      }

      let i = 0
      rootEl.addEventListener('pointerdown', () => {
        log(`pointerdown #${i++}`)
      })

      let j = 0
      rootEl.addEventListener('touchstart', (ev) => {
        log(`touchstart #${j++}`)
        // ev.preventDefault()
      })
    </script>
  </body>
</html>

9 条回复 • 2022-11-17 20:08:44 +08:00