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>
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.