When refreshing the window the minwidth and minheight is used sometimes

[Sheepolution]

Tested this mainly on Chrome, but I believe this happened on Firefox as well. Happens with both release and compat version.

This is my conf.lua:

function love.conf(t)
    t.window.width =  500
    t.window.height = 500
    t.window.minwidth = 100
    t.window.minheight = 100
end

1. I have a game with
2. I build my game using love.js.
3. I open the game in browser. It looks fine.
4. I refresh the page a few times. Here's the bug: Sometimes when refreshing the game will use the minwidth and minheight, instead of the set width and height.

It does not matter if t.window.resizable is true or not.

[Davidobot]

Huh! This may be related to times when the game window just doesn't show up randomly. Good spot.

Probably a race condition on window initialisation between SDL and the JS.

EDIT: as described here: https://love2d.org/forums/viewtopic.php?f=12&t=81736&start=140#p235945

[kraybit]

I have seen the same behavior, and perhaps found something interesting.

We tried changing the way the canvas is shown once the loading is done. Instead of changing the canvas' style from display: none to display: block, we changed all that so the canvas starts with visibility: hidden and then change that to visibility: visible. (I'm typing from memory, don't quite remember the exact CSS/JavaScript here, but the main idea is there).

To be clear, the canvas always has display: block set, only visibility changes.

That seems to make a difference. Worth a try?

[rameshvarun]

I was able to fix these problems using a couple changes in order to create a fully responsive game that fills the screen on both desktop and mobile.

1. Use visibility instead of display to show the canvas.

As @kraybit suggested, I used the following properties on the canvas: visibility: hidden; display: block; plus updating the setStatus function.

setStatus: function(text) {
  if (text) {
    drawLoadingText(text);
  } else if (Module.remainingDependencies === 0) {
    document.getElementById('loadingCanvas').style.display = 'none';
    document.getElementById('canvas').style.visibility = 'visible';
  }
},

2. Set minwidth and minheight in conf.lua to a square ratio

 t.window.minwidth = 100
 t.window.minheight = 100

I can't explain why this has to be a square ratio, but without it the image was distorted on mobile.

3. Make canvas stretch to the full screen.

I put the following properties on my canvas to make it cover the screen. position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; This automatically invokes love.resize on window size changes, likely by way of emscripten's integration with SDL.

4. Update viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, minimum-scale=1, maximum-scale=1">

I had to make some changes to the viewport meta tag. Again, not 100% what the logic of this change is, but without it the image was improperly scaled on mobile.

This is my index file.

[Davidobot]

Assuming solved but will pin as useful.