[Web] Moving window in Web App to a different screen with different resolutions result wrong sizes.

[MohamedRejeb]

Describe the bug Open a Compose web app and move the browser to a different screen with different resolutions, the sizes will be wrong and you need to refresh the page to fix it. It looks like there's no recomposition or updating the density when the screen changes.

Affected platforms

• Web (K/Wasm) - Canvas based API (I didn't try it with K/WASM but it should be the same I guess)
• Web (K/JS) - Canvas based API

Versions

• Kotlin version*: 1.9.21
• Compose Multiplatform version*: 1.5.11

To Reproduce Steps and/or the code snippet to reproduce the behavior:

1. Open a compose web app
2. Move the browser window to different screen with different resolutions
3. You will notice that the sizes of the elements are wrong.

Expected behavior Have the same sizes that you will have when you refresh the page.

[m-sasha]

Thanks for the report. Unfortunately I don't have a 2nd monitor, so it's hard to reproduce this. But we'll try when we can.

[Zhelyazko-A]

I have a Macbook Pro and a 2560x1440 external monitor and moving the window between the Macbook and the external monitor results in UI changing sizes. From Macbook -> lower res external monitor everything looks bigger. And if you then refresh the browser, the UI looks as expected (thus becomes smaller as it was on the Macbook).

The opposite happens when you move a window from the external monitor to the Macbook. The UI becomes super small. Refreshing the browser page fixes the problem.

What's more concerning is that the UI is not responding when moved to another monitor. I created a blank project using the Kotlin Multiplatform Wizzard targeting Android and Web/Wasm without modifying anything. Moving a window to another monitor results in the Button not reacting to any clicks/interactions.

Macbook:

After moving the window to the external monitor:

After refreshing the page on the external monitor (and clicking "click me" to show the image again):

[LouisCAD]

@eymar Have you been able to reproduce this issue?

[eymar]

Hey! I'm trying to reproduce this with 1.6.10 and it works fine when I move the CfW app between the monitors.

The app updates its size along with browser window, the UI elements remain responsive.

@LouisCAD do you epxerience the issue with 1.6.10?

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.