Search Unity

WebGL in Edge causes drag and drop behaviour

Discussion in 'Web' started by monark, Oct 11, 2019.

  1. monark

    monark

    Joined:
    May 2, 2008
    Posts:
    1,598
    Has anyone else noticed if you build a WebGL project and run it in Edge then if you use any mouse behaviour that requires clicking and dragging the mouse then Edge takes over and thinks you are dragging and dropping the game as a document.
    Anyone know any html foo to stop it doing that?

    This solution isn't working for us
    https://answers.unity.com/questions/1320021/webgl-ui-drag-in-edge-browser.html
     
    Last edited: Oct 11, 2019
    monark, Oct 11, 2019
    #1

  2. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Try calling `event.preventDefault();`, e.g.

    document.getElementsByTagName('canvas')[0].ondragstart = function(event) { event.preventDefault(); return false; };

    Though not sure if it is dragstart event that is causing the interaction. You may need to add an event.preventDefault(); to some other event(s) as well, perhaps related to pointer events.
     
    jukka_j, Oct 11, 2019
    #2

  3. monark

    monark

    Joined:
    May 2, 2008
    Posts:
    1,598
    Adding this to the default template seems to be working in a quick test

    Code (CSharp):
    1. <script>
    2.       var gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebGL.json", {onProgress: UnityProgress});
    3.       window.onload = function() {
    4.       document.getElementsByTagName('canvas')[0].ondragstart = function(event) { event.preventDefault(); return false; };
    5.       }
    6.  
    7.     </script>
     
    monark, Oct 11, 2019
    #3

  4. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Debugging the reported bug, it turned out it was the dragstart event, to which Edge has a different default behavior on canvases that other browsers don't.
     
    jukka_j, Oct 18, 2019
    #4

  5. HeatherK

    HeatherK

    Joined:
    Nov 13, 2019
    Posts:
    12
    Please help, I'm new and quite clueless. Did Monark's code solve this problem? If so, where do I add this piece of code? I googled where to add stuff to the default template and found that it could be this file: is it in 81-c# Script-NewBehavirourScript.cs.txt? Where do I add it in that file? Here is what is in that file right now:

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;

    public class #SCRIPTNAME# : MonoBehaviour
    {
    // Start is called before the first frame update
    void Start()
    {
    #NOTRIM#
    }

    // Update is called once per frame
    void Update()
    {
    #NOTRIM#
    }
    }
     
    HeatherK, Jan 29, 2021
    #5

  6. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    jukka_j, Feb 2, 2021
    #6

  7. HeatherK

    HeatherK

    Joined:
    Nov 13, 2019
    Posts:
    12
    Jukka, thanks,
    I'm using a template called bettertemplate that I got on github. There is an index.html file in the template folder, is this the main html file? But I think this code is html, and the code above is C#. Where do I put this code in this file?
    Sorry for all the questions, like I said, I'm pretty green.
     
    HeatherK, Feb 8, 2021
    #7

  8. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    547
    Your client...your client really requires your project to work on Edge? Like...really? Don't tell me who he is because I don't want to work for him lol. Edge. Seriously.
     
    Marks4, Feb 9, 2021
    #8

  9. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    @HeatherK the code in this post https://forum.unity.com/threads/webgl-in-edge-causes-drag-and-drop-behaviour.758960/#post-5056538 is actually JavaScript that should go into the index.html file. Looks like the message had mislabeled the code to CSharp, whereas it is JavaScript.

    Now trying to look at this issue, I realize that Microsoft no longer offers downloads for their older non-Chromium Edge, and my Windows already has the new Chromium Edge in it, so I am unable to reproduce the issue.

    To edit the index.html file, you can either edit the index.html file in a build output directly, or you can create a new WebGL template that has the fix - after which the fix will apply to all builds with that template.

    A short one liner fix to index.html should be to change the line

    <canvas id="unity-canvas"></canvas>

    to

    <canvas id="unity-canvas" ondragstart="event.preventDefault();"></canvas>

    that should do the same job as the JavaScript code above. @HeatherK I'd be grateful if you can double check if that fixes Edge? If so, I can patch the built-in templates to have that line.

    Alternatively you can try applying the JS code above. Find the start of the first <script> block in the index.html file, and right on the next line after that <script>, add in the line

    document.getElementsByTagName('canvas')[0].ondragstart = function(event) { event.preventDefault(); return false; };

    That should do the same trick.
     
    jukka_j, Feb 9, 2021
    #9

  10. HeatherK

    HeatherK

    Joined:
    Nov 13, 2019
    Posts:
    12
    jukka,
    I don't have a canvas id line anywhere. I tried adding the document.get line right under script but I when I try to run it, I get an error. I also tried to add the code from Monark under script but got the same error. Here is my code in the index.html. Also, when I added it, I simply opened the index.html from the template folder in notepad, added the code and saved it. Maybe that way doesn't work?

    <!DOCTYPE html>
    <html lang="en-us">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>%UNITY_WEB_NAME%</title>
    <style>
    html {
    box-sizing: border-box;
    }
    *, *:before, *:after {
    box-sizing: inherit;
    }
    body {
    margin: 0;
    background: #444;
    }
    #gameContainer {
    width: 100vw;
    height: 100vh;
    }
    canvas {
    width: 100%;
    height: 100%;
    display: block;
    }
    /* try to handle mobile dialog */
    canvas + * {
    z-index: 2;
    }
    .logo {
    display: block;
    max-width: 100vw;
    max-height: 70vh;
    }
    .progress {
    margin: 1.5em;
    border: 1px solid white;
    width: 50vw;
    display: none;
    }
    .progress .full {
    margin: 2px;
    background: white;
    height: 1em;
    transform-origin: top left;
    }
    #loader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
    .spinner,
    .spinner:after {
    border-radius: 50%;
    width: 5em;
    height: 5em;
    }
    .spinner {
    margin: 10px;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    transform: translateZ(0);
    animation: spinner-spin 1.1s infinite linear;
    }
    @keyframes spinner-spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
    }
    </style>
    </head>
    <body>
    <div id="gameContainer"></div>
    <div id="loader">
    <img class="logo" src="logo.png">
    <div class="spinner"></div>
    <div class="progress"><div class="full"></div></div>
    </div>
    </body>
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
    function UnityProgress(gameInstance, progress) {
    if (!gameInstance.Module) {
    return;
    }
    const loader = document.querySelector("#loader");
    if (!gameInstance.progress) {
    const progress = document.querySelector("#loader .progress");
    progress.style.display = "block";
    gameInstance.progress = progress.querySelector(".full");
    loader.querySelector(".spinner").style.display = "none";
    }
    gameInstance.progress.style.transform = `scaleX(${progress})`;
    if (progress === 1 && !gameInstance.removeTimeout) {
    gameInstance.removeTimeout = setTimeout(function() {
    loader.style.display = "none";
    }, 2000);
    }
    }
    </script>
    </html>
     
    HeatherK, Feb 9, 2021
    #10

  11. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Ah, sorry, now I realize that you are using Unity 2019.4 version. The workaround above works for Unity 2020.1 and newer (between 2019.4 and 2020.1 the index.html template changed substantially).

    For Unity 2019.4, try adding something like:

    Code (JavaScript):
    1. function disableDrag() {
    2.   var canvases = document.getElementsByTagName('canvas');
    3.   if (canvases.length == 0) return requestAnimationFrame(disableDrag);
    4.   canvases[0].ondragstart = function(event) { event.preventDefault(); return false; };
    5. }
    6. disableDrag();
    7.  
    right after the first <script> start tag in the index.html file.
     
    jukka_j, Feb 9, 2021
    #11

  12. HeatherK

    HeatherK

    Joined:
    Nov 13, 2019
    Posts:
    12
    Yes that worked! Thanks so much. I realize most likely no one will use edge, but just in case I want it to work correctly.

    I also just upgraded my software, but not my project yet, so I'll do that and test the other way to see if it works and let you know.
    As an aside, I'm having issues with jagged edges in my objects when I export to webgl. a local build is nice and crisp, but not the webgl. I have tried everything suggest on the forums and it seems that antialiasing doesn't change a thing. Do you know if this is a glitch? I'm hoping that the updated software will not have this issue. Do you know where I might find an answer to this issue?
     
    HeatherK, Feb 9, 2021
    #12

  13. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Great to hear!

    About the jagged edge issue, can you post a screenshot about the problem? (maybe two, in editor vs in browser to compare)
     
    jukka_j, Feb 10, 2021
    #13

  14. HeatherK

    HeatherK

    Joined:
    Nov 13, 2019
    Posts:
    12
    HeatherK, Feb 10, 2021
    #14

  15. HeatherK

    HeatherK

    Joined:
    Nov 13, 2019
    Posts:
    12
    Jukka, sorry to bug on you this, but I have switched my webgl template to the responsive-template on the asset store. I edited the index.html and added the same code as above, but it doesn't seem to fix it in this case. Here's what it looks like with the code added. Maybe my canvases.length is not 0?

    <!DOCTYPE html>
    <html lang="en-us">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>%UNITY_WEB_NAME%</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.javascript"></script>
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
    function disableDrag() {
    var canvases = document.getElementsByTagName('canvas');
    if (canvases.length == 0) return requestAnimationFrame(disableDrag);
    canvases[0].ondragstart = function(event) { event.preventDefault(); return false; };
    }
    disableDrag();

    </script>
    </head>
    <body>
    <div class="webgl-content">
    <div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px"></div>
    </div>
    <div class="simmer">template by: <a href="https://simmer.io" target="_blank">SIMMER.io</a></div>
    <script src="TemplateData/responsive.javascript"></script>
    </body>
    </html>
     
    HeatherK, Feb 11, 2021
    #15

  16. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Sorry, not sure what would happen there, using that template goes to unknown territory for me. Try adding some console.log() debug prints and check out the browser console log as to what is going on. Also using the Inspect Element feature in Devtools, you can search if there are other canvases on the page (at least does not look like so based on that html file)
     
    jukka_j, Feb 16, 2021
    #16