search

JetBrains / compose-multiplatform

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
https://jetbrains.com/lp/compose-multiplatform
Apache License 2.0
14.85k stars 1.08k forks source link

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

Open ILIYANGERMANOV opened 3 weeks ago

ILIYANGERMANOV commented 3 weeks ago

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

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

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 commented 3 weeks ago

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

TomislavMladenov commented 3 weeks ago

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 commented 3 weeks ago

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