cordova-plugin-ionic-webview
cordova-plugin-ionic-webview copied to clipboard
ionic-team
[iOS 15.5] Incorrect events on canvas long press
In the following simple scenario I created there are different events fired when using the plugin versus not using this plugin.
Here is the following code to reproduce - I've moved everything related to Cordova to a single html file:
This basically draws the events that are captured from the canvas to a ul element.
When not using the plugin the only event that are fired when using long click are:
touchstart and touchend
When using this plugin there are more event related to mouse operations which shouldn't be fired:
touchstart
touchend
mousemove
mousedown
mouseup
I think this is new, maybe in 15.4 or so as I think this was not present in 15.0. It happens only on "long click" and not on "regular click". Please let me know how I can help further debug this issue.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="css/index.css">
<title>Long Press Event Issues</title>
</head>
<body>
<canvas id="canvas1" style="width: 100%; height:400px; background-color: white; -webkit-user-select: none;"></canvas>
<button id="clear" onclick="clearList()">Clear list</button>
<ul id="list">
</ul>
<script src="cordova.js"></script>
<script>
document.addEventListener('deviceready', onDeviceReady, false);
let list = document.getElementById('list');;
function clearList() {
list.innerHTML = '';
}
function add(name) {
let li = document.createElement("li");
li.appendChild(document.createTextNode(name));
list.appendChild(li);
console.log(name);
}
function onDeviceReady() {
var canvas = document.getElementById('canvas1');
canvas.addEventListener("mousedown", () => {
add('mousedown');
});
canvas.addEventListener("touchstart", () => {
add('touchstart');
});
canvas.addEventListener("mousemove", () => add('mousemove'));
canvas.addEventListener("touchmove", () => add('touchmove'));
canvas.addEventListener("mouseup", (e) => {
e.preventDefault();
add('mouseup');
});
canvas.addEventListener("touchend", (e) => {
e.preventDefault();
add('touchend');
});
}
</script>
</body>
</html>
I have removed this plugin from my code and saw that the issue is resolved. But this created the unwanted situation where local storage is lost due to scheme and host name changes. Is there an easy way to keep the local storage but still remove this plugin? i.e. set in android something like:
<preference name="scheme" value="http"/>
<preference name="hostname" value="localhost"/>
and for iOS something like:
<preference name="scheme" value="ionic"/>
<preference name="hostname" value="localhost"/>
Will this work in latest Cordova version?