ios - Html5(问题): canvas scrolling when interacting/dragging on iOS 11. 3.

Question

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

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

我们还限制了 Canvas ，并确保禁用浏览器对所有平移和缩放手势的处理。 (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 APIs:

• Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes.

所以基本上改变这个:

// 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 之后阅读 Safari (iOS 11.3) 的发行说明是有意义的对于 EventTarget.addEventListener

passive: A Boolean which, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning. See Improving scrolling performance with passive listeners to learn more.