canvas dimensions are broken in 0.19 #1947

rukai · 2022-08-21T03:01:05Z

Describe the bug
My app is setup to create a minimal webpage to run the wasm app without using https://github.com/emilk/eframe_template/
In 0.18 this worked pretty well. I had to click on the app once for it to take up the entire page but I didnt bother investigating that because it wasnt high priority.
However with 0.19 the app is now suddenly unusable.
Without clicking, moving the mouse will cause the canvas height to grow until the app eventually crashes from the absurd height.

2022-08-21_12-34-37.mp4

And clicking will cause the canvas height to be set way too small.

To Reproduce

I published my little app here so you can easily reproduce the issue:

git clone https://github.com/rukai/bench_viewer
cd bench_viewer
cargo run-wasm bench_viewer --release

If you want to see the html spit out by the build process:

cat target/wasm-examples/bench_viewer/index.html

output:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <script type="module">
    import init from "./bench_viewer.js";
    window.addEventListener("load", () => {
      init();
    });
  </script>

  <h1>bench_viewer</h1>
</body>

</html>

Expected behavior

I expect egui to function without the full template.
Or at least document which parts of the template are a hard requirement and issue warnings in debug builds when the required parts of the template are missing.

Desktop (please complete the following information):

OS: Arch Linux
Browser firefox
Version: latest

emilk · 2022-08-21T07:16:37Z

eframe scales the canvas to the size of the scroll width/height of its parent (changed in #1650).

I don't know what that means for your HTML/CSS (my web skills are severely lacking), but for the official demo the only change needed was adding html, body: { height: 100%; width: 100%; } to the CSS (as documented in the changelog).

The automatic resizing of the canvas should perhaps be opt-in, and should definitely be better documented. If you have any suggestions here, I'm all ears.

rukai · 2022-09-05T02:07:58Z

Adding html, body: { height: 100%; width: 100%; } did indeed resolve the problem.

Looking at the browser logs I can actually see that there was a log warning me about this!
But it only occurred when I actually click on the app.

If more people end up hitting this it might be worth replacing that log with some logic to directly set the html, body: { height: 100%; width: 100%; } styling on egui init.

But tbh, I would rather see egui get some kind of robust web implementation where an app can dynamically fit within a larger page, like what is provided by rust-windowing/winit#2074 So I dont think there is much value in improving the developer UX of the current solution.

So I'll go ahead and close this issue, feel free to re-open if you do want to track improvements to the current width/height handling.

enomado · 2022-09-13T18:12:48Z

If more people end up hitting this it might be worth replacing that log with some logic to directly set the html, body: { height: 100%; width: 100%; } styling on egui init.

It was done exactly to NOT doing this, to leave control what size of canvas and layout you want - on the html-side.

where an app can dynamically fit within a larger page
It is what it doing. That logic only resize canvas to parent-container size. So parent size should be calculated "externally"

Problem with that "continiously incrementing height" is because your parent container resizes to fit child content, and our child resizes to fit parent. so you have loop somewhere perhaps caused by a rounding.

Perhaps resizing to parent.height-1 could work. but actually this have no sence because you always want child to fit parent, not the opposite.

BTW I have same behavior on egui layout itself.

PS: didn't see this issue to react earlier

rukai added the bug Something is broken label Aug 21, 2022

rukai closed this as completed Sep 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

canvas dimensions are broken in 0.19 #1947

canvas dimensions are broken in 0.19 #1947

rukai commented Aug 21, 2022

emilk commented Aug 21, 2022

rukai commented Sep 5, 2022

enomado commented Sep 13, 2022 •

edited

Loading

canvas dimensions are broken in 0.19 #1947

canvas dimensions are broken in 0.19 #1947

Comments

rukai commented Aug 21, 2022

emilk commented Aug 21, 2022

rukai commented Sep 5, 2022

enomado commented Sep 13, 2022 • edited Loading

enomado commented Sep 13, 2022 •

edited

Loading