V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
weijar
V2EX  ›  前端开发

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

  •  2
     
  •   weijar · 2022-10-11 08:48:44 +08:00 · 1322 次点击
    这是一个创建于 535 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    不过我同时提了几个别的 BUG 还没动静
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2411 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:59 · PVG 23:59 · LAX 08:59 · JFK 11:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.