Giter VIP home page Giter VIP logo

Comments (9)

mazunin-v-jb avatar mazunin-v-jb commented on September 27, 2024

@Schahen, could you please look at it?

from compose-multiplatform.

hayk-kerobyan avatar hayk-kerobyan commented on September 27, 2024

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.

from compose-multiplatform.

Schahen avatar Schahen commented on September 27, 2024

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

from compose-multiplatform.

Schahen avatar Schahen commented on September 27, 2024

@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

from compose-multiplatform.

hayk-kerobyan avatar hayk-kerobyan commented on September 27, 2024

  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)

Screenshot 2024-05-27 at 12 02 21 Screenshot 2024-05-27 at 12 06 05 Screenshot 2024-05-27 at 12 06 15 **Android native application code that returns 411.dp**: Screenshot 2024-05-27 at 11 57 48
  1. 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.

from compose-multiplatform.

hayk-kerobyan avatar hayk-kerobyan commented on September 27, 2024

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.

from compose-multiplatform.

hayk-kerobyan avatar hayk-kerobyan commented on September 27, 2024

@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>

from compose-multiplatform.

Schahen avatar Schahen commented on September 27, 2024

@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.

from compose-multiplatform.

okushnikov avatar okushnikov commented on September 27, 2024

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

from compose-multiplatform.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.