Black screen issue in browser

Beta Testing HTML5
1

I was looking at Solar2D projects on itch.io and noticed that they all suffer from the same problem. After pressing the fullscreen button, the game goes full but black screen until you click and an error appears in the console:

Uncaught (in promise) DOMException: Operation is not supported
request_fullscreen bundle.min.js:1032
enter_fullscreen game.min.js:1
fullscreen_btn game.min.js:1
dispatch bundle.min.js:1395
…

In bundle.min.js:1032 we can see:

  request_fullscreen: function (t, e) {
    var r,
    n,
    i;
    return r = t.requestFullscreen ? (t.requestFullscreen(), !0) : t.msRequestFullscreen ? (t.msRequestFullscreen(), !0) : t.mozRequestFullScreen ? (t.mozRequestFullScreen(), !0) : t.webkitRequestFullscreen ? (t.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT), !0) : !1,
    r &&
    e &&
    (n = window.screen) != null &&
    (i = n.orientation) != null &&
    typeof i.lock == 'function' &&
    i.lock(e), // line 1032
    r
  },

i.lock(e) is a call of ScreenOrientation lock().

The documentation states that support for this feature is limited, which is exactly what I encountered using Firefox 140 ESR. Can this be fixed?

2

Many of you may be thinking: what is he talking about, this is not our code, this is an itch.io issue. Yes, it’s itch.io code, but, on other hand, the error occurs only in Solar2D projects. I thought it might be because the projects were built a long time ago and the current version of Solar2D doesn’t have this, but no. Freshly built sample still reproduces the error. Even in latest Chromium, not only in specific version of Firefox.

3

That’s a good catch and definitely needs fixing.

I might have time to look into that some time next week. If you’ve identified the issue already, you can also consider making a PR.

4

Thanks for the response. I was starting to think there was no activity here at all :slightly_smiling_face:

Unfortunately, I jumped to conclusions (and now can’t find how to rename the topic to not confuse anyone).

This error most likely appears in all projects if the browser doesn’t support this functionality. For example, here’s a cool solar system simulation. But this error in log does not prevent applications from switching to full screen normally.

On a mobile device, tap doesn’t help to pass black screen. Click is required. On the other hand, in most cases itch.io on mobile automatically switches to full screen upon game startup, and if you’re just playing, everything runs fine. However, if you exit full screen and try return to game by press button Enter fullscreen game is not become black but tap coordinates become wrong. Again issue is related to this on-screen button.

5

Yeah, I think you’re right that the orientation lock is not the issue.

I skimmed through the HTML5 runtime code and the black screen is almost definitely caused by the engine. The runtime suspends itself when the browser window loses focus and while suspended it doesn’t render anything. Itch’s fullscreen button is outside the app’s iframe, so pressing it blurs the app and suspends it, and the resize that follows clears the canvas. Nothing updates until a click gives focus back. I think on touch there is no way back at all, since app only refocuses on mousedown and I remember SDL blocking simulated mouse events on touch devices.

If that is what is happening, the fix is to stop suspending on blur and let page visibility decide instead. I have not reproduced any of it yet. I do have a various scripts scattered across my repos that strip the blur callback stuff from HTML5 builds, like this one:

No idea about the coordinates though. Which device and browser did you see that on?

If you have a better name you’d want to rename this topic, let me know and I can change it.

I might have time to take a closer look at this next weekend.

2 Likes
6

Thanks for the detailed response. I haven’t had time to read it thoroughly yet, but I’ll definitely do so in the next few days.

Same issue reproduced on local server with only standard client-side code.

This thread can be renamed to “Black screen issue in browser” because the issue is no longer just in full-screen mode.

7

Alright, so this thing: the resizing, the screen becoming black and nothing updating until the app is clicked again, is due to the blur callback thing that the Python script I linked above sorts out.

I think that behaviour is something that needs to be changed in the engine, i.e. the app shouldn’t suspend just by the user clicking outside of it. Now you need to patch the behaviour after building.

1 Like
8

Exactly what I need. I commented out the blur callback registration in .js file and after that the problem was completely resolved, both locally and on itch.

Thanks for this workaround, XeduR.

9

Just found an old discussion on related issue.

Is this behavior, explicit ctx->pause() on blur and ctx->resume() on focus, justified? It seems to me that this should be in the form of an event that handled by the application at the discretion of the application developer.

10

One more related issue