Question

我有一个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/

任何建议都将不胜感激。

Answer 1

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

来自他们的release notes：

Web 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的EventTarget.addEventListener之后，阅读Safari的（iOS 11.3）发行说明很有意义

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

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

1 个答案: