slint icon indicating copy to clipboard operation
slint copied to clipboard

Slide puzzle wasm demo too wide on Chrome

Open ogoffart opened this issue 2 years ago • 2 comments

There is a problem in the HTML/CSS of the slider puzzle that makes it not visible on Chrome android.

To reproduce: Open https://sixtyfps.io/snapshots/master/demos/slide_puzzle/ with the chrome browser on android and observe that, after loading, you don't see the slide puzzle. In fact, the slide puzzle is there, but you need to scroll and zoom out to see it, and it is only there in part.

This is a regression between 0.1.0 and 0.1.1. In particular, this commit seems to be guilty: 40afcd40706b383498f4980dd9f5319ee2882218
Although simply reverting it doesn't completely fix the problem because even then, the puzzle appear scaled and the touch point don't match where we press.

The difference with the other demo is that we try to use a CSS grid to layout the canvas such that it appear to take the whole page.

What we want is that the slide puzzle appear to take the whole page. That there is a spinner that turns and disapear when the canvas is loaded. and of course that the slide puzzle is shown with the right aspect ratio, and that the touch event are at the right place.

ogoffart avatar Oct 05 '21 15:10 ogoffart

The problem can be also reproduced on desktop chrome if the window has a small width and a big height

ogoffart avatar Mar 12 '22 11:03 ogoffart

I don't quite remember, but I looked for a while how I could get rid of the hard-coded CSS sizes to let the browser resize the canvas and I gave as it was an intricate outcome of how winit initialize and maintain the window size, and also I think this funny piece of code: https://github.com/slint-ui/slint/blob/c51cc35544c87d60bb5bfb1c9c9a3daf8cc7427c/internal/backends/gl/glcontext.rs#L235-L247

I'm not 100% sure if that was the one, but my understanding was that there was some circular dependency where winit seemed to want to keep control of the window size on wasm32, which would have warranted this, so removing it also didn't work better.

jturcotte avatar Jul 12 '22 02:07 jturcotte