[Web Rendering Bug]: Unexpected Height Event Setter Behavior on Mouse Move when Integrating Yew with Egui

[wiseaidev]

Description:

Hello,

While working at my current company, I've been utilizing egui within our projects and have found it to be quite effective. However, as part of discussions with my tech lead regarding a transition to a pure Rust tooling, without using React or JavaScript dependencies, I decided to explore integrating Yew, Egui, and Eframe to achieve this goal. Although the application renders successfully, I've encountered a peculiar issue where events consistently trigger, resulting in an unexpected increase in the height of the canvas. This report aims to address and investigate this issue further.

Steps to Reproduce:

1. Visit the repository: Yew Egui Bug Repo
2. Clone the repository to your local machine.
3. Execute the command make run assuming that trunk is already installed.
4. Open your preferred browser and navigate to the deployed application.

For a quick demonstration, the application has been deployed at Yew Egui Bug Demo for convenient inspection.

Expected Behavior:

The canvas should render without any unexpected alterations, maintaining consistency with typical JavaScript-based frameworks like React.

Screenshots:

https://github.com/emilk/egui/assets/62179149/7a654fbb-7929-4a1d-a6e2-10ea5e700cfa

https://github.com/emilk/egui/assets/62179149/b625445c-fc36-4277-b4c1-360a81d1be55

Desktop Environment:

• Operating System: Any
• Browser: Any
• Browser Version: Any

Smartphone Environment:

• Device: Any
• Operating System: Any
• Browser: Any
• Browser Version: Any

Additional Context:

N/A

[rustbasic]

Try limiting the maximum size with .max_size(). Perhaps, it will have some effect.

[wiseaidev]

Try limiting the maximum size with .max_size().

I believe you meant set_max_size because I'm not using an egui window. I've added this line, but the problem persists. The issue lies in the fact that the height always remains zero. Try adjusting the slider value, or simply click on the canvas, and you'll notice this error in the console.

Somewhere within the source code, the height consistently assigned as zero, and egui/eframe attempts to adjust it to a value greater than zero, hence the observed behavior. However, even after this adjustment, the height remains zero internally.

Edit: I've just followed the suggestion html, body { height: 100%; width: 100% }, and the problem has disappeared. Feel free to close the issue if you believe it's resolved, or perhaps it would be best to add a min size to the UI if it's zero.

[emilk]

If you decide to try to fix this, I advice you to take a look at https://github.com/emilk/egui/blob/14194f5d3a5d3c10a09822d3234d2e03e737a0db/crates/eframe/src/web/mod.rs#L127-L175 where the egui canvas is resized to fill its parent element. My web skills are basically zero, so I'm sure there is plenty room for improvement there and elsewhere (if nothing else in terms of docs)

[wiseaidev]

If you decide to try to fix this, I advice you to take a look at

Thanks! I'll take a look when I have some free time.