Closed hayk-kerobyan closed 4 weeks ago
@Schahen, could you please look at it?
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.
@hayk-kerobyan ջան we'll do our best to fix this ASAP, will keep you posted
@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 -
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?
I'm checking https://passaporteaupair.com/ but failing to see something that's wrong
Target is JS(screenshot attached, source code)
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:
Browsers affected:
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.
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.
@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>
@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.
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 to2.0.0
andorg.jetbrains.compose
to1.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 isComposeViewport
. 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
Versions
To Reproduce Steps to reproduce the behavior:
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