I have been exporting apps to WebGL with the “Minimal” template selected in Player Settings > Resolution and Presentation. When I run these applications in a browser, they seems to take on a slight border of empty space around at least the top and left sides, separating them from the edges of the window they are otherwise drawn to. I first noticed this with the games I uploaded to itch.io, and when I tried opening an exported .html file directly with Firefox, I noticed a similar gap between the game window and the top-left corner of the screen.
What is causing this? Is there any way to remove this empty space?
I believe I’ve realized where these spaces are coming from: default HTML styling.
_
From how I understand it, Unity’s “Minimal” WebGL template is not just a simply designed template, it’s basically no template at all. When a web browser loads the Unity project, it looks for a style guide to tell it how to display the elements on the page. When it finds none, it references it’s own style guide (which seems to be fairly standard across the major browsers at this point) by default. It so happens that the typical default style guide currently includes a margin of 8 pixels, and this is basically what causes that buffer around the edges (default top-left alignment also contributes to the problem). It kind of makes sense for totally blank web pages, but it starts to look wonky once it’s embedded in a more complex layout like the one that itch.io uses.
_
So, we can blame Unity for making their “Minimal” template too minimal, itch.io for not implementing robust formatting features, or ourselves for trying to publish games to the Web without knowing a shred of HTML/CSS in the first place.
_
In any case, the solution I’ve gone with for now is creating a custom template based on the Default template and just taking out the code and resources for the footer bar. I’ve attached a .zip with the template I use and instructions for how to use it / add it to Unity.
_
I hope this helps!
