https://kotlinlang.org logo
#compose-web
Title
# compose-web
m

Mantas Varnagiris

03/17/2024, 8:04 PM
Hi, since upgrading compose multiplatform to 1.6.1, content started to be rendered only in part of the canvas. I thought this should have been raised already, so maybe I'm doing something wrong? It looks fine on 1.6.0. Screenshots in thread
image.png,image.png
a

Artem Kobzar

03/18/2024, 8:39 AM
@Oleksandr Karpovich [JB] ^^ Am I right if I say that you removed the
Window
for Compose for Web, and from 1.6.0 user should setup the size on the HTML side for the
canvas
which renders the
CanvasBasedWindow
?
u

[JB] Shagen

03/18/2024, 8:51 AM
Nothing like that was planned for 1.6.1 so let us investigate
🙏 1
o

Oleksandr Karpovich [JB]

03/18/2024, 9:21 AM
> user should setup the size on the HTML side for the
canvas
which renders the
CanvasBasedWindow
? Setting the size on the HTML side is not necessary. By default the canvas will take the entire window space (at least it should unless there is a bug).
m

Mantas Varnagiris

03/18/2024, 9:34 AM
This is my index.html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dovanų Sąrašas</title>
    <script src="skiko.js" type="application/javascript"></script>
    <script src="dovanusarasas.js" type="application/javascript"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: white;
            overflow: hidden;
        }

        #warning {
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 100;
        }
        #warning li {
            padding-bottom: 15px;
        }

        #warning span.code {
            font-family: monospace;
        }

        ul {
            margin-top: 0;
            margin-bottom: 15px;
        }

        #footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: white;
        }

        #close {
            position: absolute;
            top: 0;
            right: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<canvas id="dovanuSarasasCanvas"></canvas>
</body>
</html>
👍 1
u

[JB] Shagen

03/18/2024, 10:14 AM
@Mantas Varnagiris and what about the compose initialisation side - are you passing up requestResize explicitly?
m

Mantas Varnagiris

03/18/2024, 10:19 AM
No I do not. Content from the main function is in the screenshot next to that red blob screenshot in the this thread at the top.
🙏 1
o

Oleksandr Karpovich [JB]

03/18/2024, 11:12 AM
We tried to reproduce but no luck so far. Let's try to figure out the differences: The main function in our case looks like this:
Copy code
fun main() {
    CanvasBasedWindow(title = "1.6.1 Regression Demo", canvasElementId = "ComposeTarget") {
        Box(Modifier.fillMaxSize().background(Color.Magenta))
    }
}
Do you have anything else in your main function? Do you use k/wasm or k/js target? (Both work fine btw in our case) What browser do you use? (Look like Chrome, but just to be sure) What version? Did it start the page like this? Or after some actions?
u

[JB] Shagen

03/18/2024, 11:12 AM
Mantas, can I ask you to check this repo https://github.com/Schahen/compose_wasm_size_regression basically we’ve tried to create minimal example but so far failing to pinpoint the issue
1
m

Mantas Varnagiris

03/18/2024, 11:27 AM
Same issue for me with this repo
🤔 1
I'm using Chrome - should be latest
Edge and Firefox also have same issue just tested now
image.png
Oh interesting.... One difference we might have is - I'm on Windows. I just tried same repo on a mac and it works fine
o

Oleksandr Karpovich [JB]

03/18/2024, 11:34 AM
😄 that's what I noticed from the screenshot and doubted it could be a reason. Thanks for clarifying
m

Mantas Varnagiris

03/18/2024, 11:35 AM
never underestimate windows being a problem 😄 But does this give you any clue to what might be the issue?
o

Oleksandr Karpovich [JB]

03/18/2024, 11:36 AM
not really yet. We'll try it on windows too (windows 11, we don't have other versions to test).
m

Mantas Varnagiris

03/18/2024, 11:37 AM
I'm on Windows 11. If you need anything else let me know how I can help. Thanks a lot to you for jumping on this so promptly gratitude thank you
thank you color 2
o

Oleksandr Karpovich [JB]

03/18/2024, 1:57 PM
A fun update: we have only 1 windows machine out of 3 that we tried where it's reproducible 😄 we're lucky to have at least 1
m

Mantas Varnagiris

03/18/2024, 2:11 PM
Oh so it does not even happen on all windows machines.... Crazy 🙂
a

AJ Alt

03/18/2024, 5:42 PM
I'm also seeing this on Windows 10, so it's not specific to 11 at least.
u

[JB] Shagen

03/18/2024, 6:14 PM
So OK, it looks like the issue relates to the scaling of the screen which is set in Windows settings We will let you know as soon as the fix will end up in master (and of course we’ll do our best to deliver published fix in whatever next minor release will be. Thank you for reporting this actually!
gratitude thank you 2
🎉 1
m

Mantas Varnagiris

03/26/2024, 4:05 PM
I see that
1.6.10-dev1551
already is scaling to full window, but it seems like it scale up from previously squished version as the UI seems to be blurry. And also input for components seem to be with offset. For example hover effect on a button kicks in when my mouse is in that red marked area
j

Jack

03/26/2024, 10:27 PM
I just updated a test compose-web app from 1.5.x to 1.6.10-dev1551 and am experiencing the same input offset issue described by Mantas above (mouse coordinates off by ~1.3x) in Google Chrome on Linux Mint 21.
In case it is helpful: the blurry display and misaligned inputs observed in
1.6.10-dev1551
do not occur if I set my Linux/Chrome browser's zoom level to 80%, which results in
window.devicePixelRatio = 1.0
. When the display ratio is higher (e.g. 1.375 at browser zoom 110%) the display becomes blurry and mouse coordinates are misaligned. With compose-web version
1.6.0
I do not experience display blur or mouse offset issues, regardless of devicePixelRatio.
l

louiscad

04/01/2024, 9:24 PM
Is it with WASM or with JS?
j

Jack

04/01/2024, 9:46 PM
My tests were all with JS, not WASM.
👍🏼 1
m

Mantas Varnagiris

04/02/2024, 7:18 AM
for me it's with WASM
g

Greg Steckman

04/21/2024, 2:44 AM
I'm a little late to this thread, but I am observing the same issue with 1.6.1 and 1.6.2, on Windows 10, using JS, with Firefox, Chrome, and Edge.
Has a bug report been filed for this that I can track?
17 Views