Html5（问题）：在 iOS 11.3 上交互/拖动时画布滚动。

Question

我有一个 HTML5 应用程序，它广泛使用其画布。iOS 11.3 更新后，我们开始遇到触摸问题。

实现时，我们确保明确告诉用户代理不应处理该事件。（即我们添加了evnt.preventDefault()

我们还限制了画布，并确保禁用浏览器对所有平移和缩放手势的处理。（touch-action: none虽然Safari不正式支持这个基本实现，但这确实适用于iOS 11.3之前的任何浏览器）

这并不特定于任何浏览器，但它会在 11.3 设备之后的任何 iOS 设备上表现出来。

可以使用此 JSFiddle 进行复制：https://jsfiddle.net/w542djdw/15/

任何建议将不胜感激。

Answer 1

诀窍在于 Safari 11.1（捆绑到 iOS 11.3 中）如何处理触摸事件。

从他们的发行说明中：

网络 API：

• 更新了根文档触摸事件侦听器以使用被动模式，从而提高滚动性能并减少崩溃。

所以基本上改变这个：

// Prevent scrolling when touching the canvas
document.body.addEventListener("touchstart", function (e) {
    if (e.target == canvas) {
        e.preventDefault();
    }
}, false);
document.body.addEventListener("touchend", function (e) {
    if (e.target == canvas) {
        e.preventDefault();
    }
}, false);
document.body.addEventListener("touchmove", function (e) {
    if (e.target == canvas) {
        e.preventDefault();
    }
}, false);

进入这个：

// Prevent scrolling when touching the canvas
document.body.addEventListener("touchstart", function (e) {
    if (e.target == canvas) {
        e.preventDefault();
    }
}, { passive: false });
document.body.addEventListener("touchend", function (e) {
    if (e.target == canvas) {
        e.preventDefault();
    }
}, { passive: false });
document.body.addEventListener("touchmove", function (e) {
    if (e.target == canvas) {
        e.preventDefault();
    }
}, { passive: false });

阅读EventTarget.addEventListener 的文档后，阅读 Safari (iOS 11.3) 的发行说明是有意义的

Passive：一个布尔值，如果为 true，则表示侦听器指定的函数永远不会调用 PreventDefault()。如果被动侦听器确实调用了 PreventDefault()，则用户代理除了生成控制台警告之外不会执行任何操作。请参阅通过被动侦听器提高滚动性能以了解更多信息。