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

2022-10-11 08:48:44 +08:00
 weijar

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>
1364 次点击
所在节点    前端开发
9 条回复
weijar
2022-10-11 09:04:46 +08:00
按理说双击事件这是再正常不过的手势事件了吧?
一开始我写的手势库没有双击事件我还没往浏览器 BUG 这方面想因为过于不可能,但没想到 Safari 下限如此之低,这么严重的 bug 总不可能是我第一个碰到?
Lattez
2022-10-11 09:10:39 +08:00
Safari 总有各种各样神奇的兼容性问题,所以还是老实 Chrome 保平安...
Lattez
2022-10-11 09:11:23 +08:00
@Lattez 忽略没看到是在 iOS 上😂
weijar
2022-10-11 09:46:09 +08:00
另外要说一点,在我的 App 里双击后整个界面还会更离谱地上移 100 多像素(不是容器滚动,是整体上移,往下扒一下后还会掉下来),我怀疑是因为这个导致双击后一击被界面上移弄没了。但这个最简 demo 里没有体现出会上移,我再想想怎么搞出来这个上移效果。
makelove
2022-10-11 11:14:20 +08:00
因为上一条原因,试着给 body 加个 overflow:hidden 禁滚动(虽然页面很小根本不可能滚动)竟然又能检测到双击了,看来似乎还是因为 Safari 会神奇地双击滚动导致不能双击。
但正常 App 显然不能禁了 body 滚动,所以不是个有效的解决方法。
yangzzzzzz
2022-10-11 13:44:42 +08:00
safari 自动填充验证码还会输两遍
YsHaNg
2022-10-11 22:28:29 +08:00
因为双击会检测 frame 宽度放大吧
neiltroyer849
2022-11-17 17:22:42 +08:00
@yangzzzzzz 对啊神烦。。。这个 bug 从 15 到 16.1 了都还没修,而且是整个 WebKit 都有,所以 iOS app 用了 WKWebview 的也会遭
weijar
2022-11-17 20:08:44 +08:00
好消息是我提了 BUG 后已经修复了
https://bugs.webkit.org/show_bug.cgi?id=246313

不过我同时提了几个别的 BUG 还没动静

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/885949

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX