https://kotlinlang.org
Join Slack
Hi, since upgrading compose multiplatform to 1.6.1, content started to be rendered only in part of t...
# compose-web
m
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
@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
Nothing like that was planned for 1.6.1 so let us investigate
🙏 1
o
> 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
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
@Mantas Varnagiris and what about the compose initialisation side - are you passing up requestResize explicitly?
m
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
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
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
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
😄 that's what I noticed from the screenshot and doubted it could be a reason. Thanks for clarifying
m
never underestimate windows being a problem 😄 But does this give you any clue to what might be the issue?
o
not really yet. We'll try it on windows too (windows 11, we don't have other versions to test).
m
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
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
Oh so it does not even happen on all windows machines.... Crazy 🙂
a
I'm also seeing this on Windows 10, so it's not specific to 11 at least.
u
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
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
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
Is it with WASM or with JS?
j
My tests were all with JS, not WASM.
👍🏼 1
m
for me it's with WASM
g
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?
110 Views
Open in Slack
PreviousNext
Powered by

kotlinlang

A modern programming language that makes developers happier.

Powered by