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
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.
Adding this to the default template seems to be working in a quick test
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebGL.json", {onProgress: UnityProgress});
window.onload = function() {
document.getElementsByTagName('canvas')[0].ondragstart = function(event) { event.preventDefault(); return false; };
}
</script>
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.
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#
}
}
The default template in this case refers to the Unity WebGL template, not a .cs template. See Unity - Manual: Using WebGL templates for the documentation. The code should go into the main .html file.
It looks like it would be safe for us to do this by default for all built Unity WebGL pages. Added this to our task board.
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.
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.
@HeatherK the code in this post WebGL in Edge causes drag and drop behaviour 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
to
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 block in the index.html file, and right on the next line after that , add in the line
document.getElementsByTagName(‘canvas’)[0].ondragstart = function(event) { event.preventDefault(); return false; };
That should do the same trick.
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?
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:
function disableDrag() {
var canvases = document.getElementsByTagName('canvas');
if (canvases.length == 0) return requestAnimationFrame(disableDrag);
canvases[0].ondragstart = function(event) { event.preventDefault(); return false; };
}
disableDrag();
right after the first start tag in the index.html file.
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?
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)
Well I did figure out something that improved it a LOT. I unchecked “allow HDR” in my camera. I think it is overall a tiny bit more fuzzy, but the jagged edges are gone so it is much improved. I found this solution here on antialiasing
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?
%UNITY_WEB_NAME%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)