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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

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