HTML5(问题):在iOS 11.3上进行交互/拖动时画布滚动. [英] Html5 (issue): canvas scrolling when interacting/dragging on iOS 11.3.
问题描述
我有一个HTML5应用程序，该应用程序充分利用了其画布.在iOS 11.3更新之后，我们开始遇到触摸问题.
I have an HTML5 app that makes extensive use of its canvas. We started experiencing issues with touch after the iOS 11.3 update.
实施后，我们确保明确告诉用户代理，不应该处理该事件. (即，我们添加了evnt.preventDefault()
When implemented, we made sure to explicitly tell the user agent that the event should not be handled. (ie. we added evnt.preventDefault()
我们还限制了画布，并确保禁用浏览器对所有平移和缩放手势的处理. (touch-action: none，尽管不是 Safari尚未正式支持此基本功能实施，这在iOS 11.3之前的任何浏览器上都有效)
We also restricted the canvas, and make sure to disable the browser handling of all panning and zooming gestures. (touch-action: none, although not Safari does not officially support this basic implementation, this does work on any browser prior iOS 11.3)
这并非特定于任何浏览器，但会在11.3设备之后的任何iOS设备上显示.
This is NOT specific to any browser, but it manifests itself on any iOS device after the 11.3 device.
可以使用以下JSFiddle复制它: https://jsfiddle.net/w542djdw/15/
It can be reproduced using this JSFiddle: https://jsfiddle.net/w542djdw/15/
任何建议将不胜感激.
Any recommendation would be greatly appreciated.
推荐答案
诀窍在于Safari 11.1(捆绑到iOS 11.3中)如何处理触摸事件.
The trick is in how Safari 11.1 (bundled into iOS 11.3) deals with touch events.
摘自他们的发行说明:
Web API:
Web APIs:
- 更新了根文档触摸事件侦听器以使用被动模式，从而提高了滚动性能并减少了崩溃.
所以基本上要改变它:
// 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 });
