In the template for HTML5 a splash image do not hidden after game loaded.
In Safari it’s look like:
Safari version:
Safari version:
This looks like an issue we added a ticket for right before christmas (DEF-3061).
We think it is related to a security update for Safari to 11.0.2. Does it look like OK in another web browser, chrome for example?
it’s ok in chrome (Version 63.0.3239.84 (Official Build) (64-bit)) and in firefox (57.0.3 (64-bit))
1 Like
I found old issue
2 Likes
I think the simplest way to fix this issue is removing of background image when game loaded.
I don’t want to fix js every time after build, and like a hot fix I made next hack in html5 template:
setTimeout(function(){Module.canvas.style.background = '#000000';},2000);
But would be great if you will add something like this in dmloader.js to postRun or _preloadAndCallMain function.
My solution 
if html5 then
html5.run("Module.canvas.style.background = '#000'")
end
2 Likes
Cool, thanks!
But I still hope for a fix in dmloader.js.
Solved in Defold 1.2.125
1 Like
Raise this topic from grave 
Default ‘Basic 3D Project’ with just ‘clear_color.’ When built for HTML5, this is the result! The clear color is blue (not yellow), and why is the splash logo still here? 
Is this a known bug? (latest Firefox & Chrome on MacOS)
2 Likes
Oh, this is because the alpha. When it set to 0, it is transparent I guess.
msg.post("@render:", "clear_color", { color = vmath.vector4(1, 0, 1, 0) })
1 Like
Ah right the template needs to be updated. Clear color was not respected for web before
1 Like
It seems the Defold logo in the .canvas-app-canvas CSS is affecting the depth buffer. The color has no effect unless the background-color property is added. I think I should report this issue.
This is the result when I remove the logo from css and add black color to background-color
2 Likes
We will cherry-pick the fix into 1.9.7 beta when it will be merged: Remove background image and fill canvas background with black color. by ekharkunov · Pull Request #10066 · defold/defold · GitHub
Thank you!
3 Likes
Wow, great, thank you 
2 Likes
The PR didn’t fix the issue, just hides it and introduces always black background of canvas on HTML5 if you set clear color alpha less then 1.0:
<= 1.9.6, alpha 0.0:
1.9.7 beta with the fix, alpha 0.0:
BTW It’s actually a cool feature when the canvas can be transparent - for example, Defold can be used for rendering PBR models of products in online shops (this is the audience of PlayCanvas, Babylon and ThreeJS, hah).
Anyway, I would like to point out that this new feature was added somewhere here:
There is an error in the constant, it should be 0x00020008 for GLFW_ALPHA_BITS. But it doesn’t matter anyway, since the Defold platform code always requests for alphaBits and it turns out that the alpha condition will always be true.
In WebGL, the context property alpha = true enables blending of the canvas with the page, which consequently reduces rendering performance (confirmation here WebGL and Alpha). From this I assume that Defold web games are running slower than before since alpha is now always true.
I think the team needs to revisit the new fix with color=black and the old PR where support for canvas transparency was added, and do this (and please test before publishing to the engine):
- If clear color alpha = 1.0, then set webgl context “alpha” attribute to
false. - If clear color alpha < 1.0, then set webgl context “alpha” attribute to
true. - revert the PR with background color = black.
This will bring the performance of web games back to the previous level and fix the @selimanac problem.
3 Likes
Setting background color always to black was chosen because it makes behavior between different platforms to be the same.
Let’s go through the all steps regarding that issue.
Before initial fix with alphabits graphics context background was always black (I say about GL context, not html element). When you set any clear color - it define which color should be used for frame buffer filling. In some cases (need setup blending function in specific manner) you can obtains fully transparent pixels in you frame buffer (because of blending function initial color also blended and result part of frame buffer becomes transparent). When frame buffer displayed transparent part becomes black because of context background.
For the desktop platform alhabits configuration options was always here. But nobody noticed transparent part of graphics context because it was black background of application window.
Than alphabits changes arrived for web. And users started observe Defold logo under the transparent graphics context. I believe it happened because initially no black background was defined for underlying html element.
So the final part of changes was clean background and set background color to black to meet the same behavior as it’s presented at desktop platforms.
I agree only with your concerns about rendering performance. And thank for pointing to the wrong constant value.
But regarding all other points that you raised:
- My opinion is that background of html element should be cleared and should be set to black (or it can be configurable via game.project settings)
- Clear color settings relates only to graphics stuff and shouldn’t correlate with anything outside of rendering commands.