ionic-team / cordova-plugin-ionic-webview

Web View plugin for Cordova, specialized for Ionic apps.
Apache License 2.0
484 stars 391 forks source link

[iOS 15.5] Incorrect events on canvas long press #670

Open HarelM opened 2 years ago

HarelM commented 2 years ago

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>
HarelM commented 2 years ago

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?