1.6.10 has broken the screenWidth calculation

[hayk-kerobyan]

Describe the bug In a Kotlin/JS application with(LocalDensity.current) { LocalWindowInfo.current.containerSize.width.toDp() } stopped working on mobile devices after I updated the kotlin to 2.0.0 and org.jetbrains.compose to 1.6.10. While the Chrome web browser works as expected it doesn't work as expected on Android simulator and iOS device. Same for Safari on iOS. The root wrapper is ComposeViewport. This means, the checks to that decide whether to show web composable or mobile view composable are no longer working.

Source code: https://github.com/hayk-kerobyan/srcpassaporteaupair The project is deployed at https://passaporteaupair.com/

Affected platforms

• Web (K/JS) mobile devices

Versions

• Libraries:
  • Compose Multiplatform version: 1.6.10
• Kotlin version: 2.0.0

To Reproduce Steps to reproduce the behavior:

1. Run this code snippet on a mobile device:

   val screenWidth = with(LocalDensity.current) {
        LocalWindowInfo.current.containerSize.width.toDp()
    }
   

2. See error the value returned by the function is not correct in mobile browsers. or
3. Visit https://passaporteaupair.com/ on web browser(works as expected) and mobile devices(not working)

Web UI

Web Adaptive UI(when the chrome browser's width is lessened)

Android(must get the correct width and use the adaptive UI)

iOS

[mazunin-v-jb]

@Schahen, could you please look at it?

[hayk-kerobyan]

Hey @Schahen jan, any idea what can be the reason? Also, as you can see from the 3rd screenshot of Andrpoid phone Chrome the tip part is cut(the website is not scrolled, it shows its top). Can't release unless the responsive UI works correct. This is the only blocker.

[Schahen]

@hayk-kerobyan ջան we'll do our best to fix this ASAP, will keep you posted

[Schahen]

@hayk-kerobyan it looks like I need additional information. To be 100% sure I'm looking into the same issue that is actually reported. So, first of all -

• issue is about the js target (not the wasm one)?
• what exactly happens at step "See error the value returned by the function is not correct in mobile browsers. or" - is it a runtime error one can see in console or an error in that sense that application get incorrect dimensions?
• which browsers are affected on mobile?

I'm checking https://passaporteaupair.com/ but failing to see something that's wrong

[hayk-kerobyan]

1. Target is JS(screenshot attached, source code)

2. To make things easier: With the following code I am getting the screen width 979.dp on Pixel 6A, however, running a native android application on the same device shows that the screen width is 411.dp which must be the correct width of the screen(device) Android native application code that returns 411.dp:

3. Browsers affected:

• Android Chrome
• Android Firefox
• iOS Chrome
• iOS Safari

In addition, for some reason the screen is shifted up only on Android Chrome (as if there is offsetY = -300.dp) which makes the top part of the composable be cut.

[hayk-kerobyan]

Btw, the density from LocalDensity.current.density method is returned correct(although there is a small difference: for the same screen android Chrome and Firefox returned 2.625 and 2.608 respectively)

However, LocalWindowInfo.current.containerSize.width returned 2572 px on Android Chrome and 2556 px on Android Firefox while the native android application returned 1080 px using currentWindowSize().width method from androidx.compose.material3.adaptive:adaptive library.

Apparently the problem is in the width value of this method LocalWindowInfo.current.containerSize.width. The browser container itself seems to work correct as the content composable doesn't go beyond the screen (to the right of the screen) except the only case mentioned in my previous message for android Chrome.

[hayk-kerobyan]

@Schahen jan, my bad I modified the index.html to the following and it started to work. Aparently it's not an issue on Compose multiplatform, it's just a matter of the index.html config. The top part of the website is cut on Chrome when desktop mode is being enabled, however this is an another issue, for which I will try to find a sollution. Closing the issue. Sorry for inconvenience.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Passaporte AuPair</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        #root {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }
    </style>
    <script src="skiko.js"></script>

</head>
<body>
<div id="root"></div>
<script src="composeApp.js"></script>
</body>
</html>

[Schahen]

@hayk-kerobyan ջա՜ն Thank you very much for investigating! It's actually still the problem of our API that people keep in mind all this meta/viewport related issues. We'll try to come up with something that will make developers live easier in that aspect.

[okushnikov]

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