Search Issue Tracker

Active

Votes

0

Found in

2018.4

2018.4.8f1

2019.2

2019.3

2020.1

Issue ID

1190839

Regression

No

[WebGL] Mouse input is blocked after a few moves when using Edge browser

WebGL

-

How to reproduce:
1. Open attached project ("MouseTestWebGL.zip")
2. Open Build Settings window (File->Build Settings...)
3. Select platform to WebGL
4. Click Build And Run
5. From opened browser window copy page URL and paste it to Edge browser
6. Try to move the ball around

Expected result: Mouse moves only the ball
Actual result: Mouse moves the whole player window

Reproducible with: 2018.4.11f1, 2019.2.10f1, 2019.3.b7, 2020.1.0a9

Comments (2)

  1. 7cc0501dcfb253637f5643d25fb24cef?d=mm

    jukka_j

    Oct 17, 2019 14:06

    To work around the issue, navigate to

    C:\Program Files\Unity\Hub\Editor\2019.3.0b7\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\

    and edit UnityLoader.js and find "instantiate:" function with lines

    var Module = gameInstance.Module;
    Module.canvas = document.createElement("canvas");

    after those two lines, put in

    // Disable Microsoft Edge (Chromium-based, tested on 44.17763.771.0) from dragging the whole canvas as an image object when one drags with a mouse over the canvas
    Module.canvas.ondragstart = function(e) { e.preventDefault(); };

    That will remove Edge from attempting to start an image drag on the canvas.

    Another workaround, slightly hacky, but self-contained to user template, is to edit the main html file, find

    <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "Build/game.json", {onProgress: UnityProgress});
    </script>

    and change it to

    <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "Build/game.json", {onProgress: UnityProgress});
    function disableEdgeCanvasDrag() {
    var canvas = document.querySelector('canvas');
    if (!canvas) return setTimeout(disableEdgeCanvasDrag, 1000);
    canvas.ondragstart = function(e) { e.preventDefault(); };
    }
    disableEdgeCanvasDrag();
    </script>

  2. 26132c9b0685582a6e4e1967ef73c1bb?d=mm

    Johny90

    Oct 15, 2019 01:57

    This is such a great resource that you are providing and you give it away for free. <a href="https://bubble-shooter.co">bubble shooter</a>

Add comment

Log in to post comment

All about bugs

View bugs we have successfully reproduced, and vote for the bugs you want to see fixed most urgently.