HTML5: Screen flickering when window is being resized?

on Apple M1, any HTML5 defold game’s screen becomes black as I am resizing the browser window. However, the same issue does not happen on a windows machine. Non defold html5 games also do not have this issue.

Is this a known issue? I am surprised to see that the behaviour would be different since browsers are cross-platform

Is this on Chrome? I believe until tey switch to the Angle Metal backend there will be these issues.
Godot for example takes 3 minutes to load a html5 build on my M1 vs seconds with my lower spec pc

Yes it’s chrome. For HTML5 I believe befold is interacting with WebGL, which technically should have the same behaviour on any platforms for the same browser. It’s very weird for it to black screen while the window is resizing, or taking 3 minutes to load (doesn’t happen on my M1)

Unfortunately browsers on Mac still have to go through a translation layer to OpenGL (webgl).
You can check this by typing about:gpu in the address bar of chrome.
Most likely you’ll see this:

GL_RENDERER: ANGLE (Apple, Apple M1 Max, OpenGL 4.1 Metal - 83)

If you close all instances of Chrome and launch it from the terminal with this:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --use-cmd-decoder=passthrough --use-angle=metal --user-data-dir=<some-random-folder>

You should get this when checking the angle backend:

GL_RENDERER: ANGLE (Apple, ANGLE Metal Renderer: Apple M1 Max, Version 13.2.1 (Build 22D68))

I’ve found that most glitches go away with the pure metal renderer and shader compilation is also 10x faster.

Not sure when Google will switch to the new renderer by default.

2 Likes

I see! and yeah that’s what I am seeing on my Apple M1 as well. However, only defold games have this black screen glitch during window resize. Non-defold html5 canvas games render instantly as the window gets resized