[1.6.10-beta02][Android] Compose Multiplatform isn't working on mobile web

[ILIYANGERMANOV]

Describe the bug Compose Multiplatform (up to inclusive 1.6.10-beta02) isn't working on mobile Chrome portrait.

You repro with https://github.com/Ivy-Apps/learn/tree/ef45c76c8d6b3b2e1c205fa112cf3fa8fd8d028d Test the website live at: https://ivylearn.app/

More info at this Kotlin "#compose-web" Slack thread: https://kotlinlang.slack.com/archives/C01F2HV7868/p1714135737642379

Portrait - not working

https://github.com/JetBrains/compose-multiplatform/assets/5564499/70651fc1-870d-4248-9367-1696014dd352

Portrait (Fold4 opened) - working

https://github.com/JetBrains/compose-multiplatform/assets/5564499/7bbb0602-6f53-497a-8b20-e4809318bf8e

Note: It woks well on Desktop Chrome.

Affected platforms

• Desktop (Windows, Linux, macOS) - works ✅
• iOS - haven't tested
• Web (K/Wasm) - Canvas based API - broken ❌
• Web (K/JS) - Canvas based API - broken ❌
• Web (K/JS) - HTML library - haven't tested

Versions https://github.com/Ivy-Apps/learn/blob/ef45c76c8d6b3b2e1c205fa112cf3fa8fd8d028d/gradle/libs.versions.toml

• Kotlin version*: 1.9.23
• Compose Multiplatform version*: 1.6.10-beta02
• OS version(s)* (required for Desktop and iOS issues):
• OS architecture (x86 or arm64):
• Device (model or simulator for iOS issues): Android, Fold4 but can repro on S24 and all Android devices
• JDK (for desktop issues):

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

1. Open https://ivylearn.app/ on a mobile Android device
2. Try to click a Button - it won't work.
3. See error

Expected behavior It renders at the center of the screen and UI interactions work like on desktop.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

[pablichjenkov]

Also related: https://github.com/JetBrains/compose-multiplatform/issues/2785

[TomislavMladenov]

As for other people looking for a workaround maybe you can try to add <meta name="viewport" content="width=device-width, initial-scale=1.0"> and maybe adjust the CanvasSize, something like this:

<div>
    <canvas id="ComposeTarget"></canvas>
</div>
<script src="composeApp.js"></script>
</body>

[ILIYANGERMANOV]

I can confirm the workaround proposed by @TomislavMladenov worked for me 💯

[okushnikov]

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