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

【问题标题】：Html5 (issue): canvas scrolling when interacting/dragging on iOS 11.3.Html5（问题）：在 iOS 11.3 上交互/拖动时画布滚动。
【发布时间】：2018-09-26 00:13:53
【问题描述】：

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

实施时，我们确保explicitly tell the user agent that the event should not be handled。（即我们添加了evnt.preventDefault()

我们还限制了画布，并确保禁用浏览器对所有平移和缩放手势的处理。（touch-action: none，虽然不是Safari does not officially support this basic implementation，但这确实适用于iOS 11.3之前的任何浏览器）

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

可以使用这个 JSFiddle 复制它：https://jsfiddle.net/w542djdw/15/

任何建议将不胜感激。

【问题讨论】：

标签： ios html5-canvas touch

【解决方案1】：

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

来自他们的release notes：

网络 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 });

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

passive：一个布尔值，如果为真，则表明侦听器指定的函数永远不会调用 preventDefault()。如果被动侦听器确实调用了 preventDefault()，用户代理除了生成控制台警告之外什么都不做。请参阅使用被动侦听器提高滚动性能以了解更多信息。

【讨论】：