egui/web_demo
Jan Procházka 759c8fd2c9
Use ResizeObserver instead of `resize` event (#4536)
Currently, if the size of the canvas element changes independently of
the size of the browser window (e.g. due to its parent element
shrinking), then no repaints are scheduled.

This PR replaces the `resize` event with a `ResizeObserver`, which
ensures that _any_ resize of the canvas element (including those caused
by browser window resizes) trigger a repaint. The repaint is done
synchronously as part of the resize event, to reduce any potential
flickering.

The result seems to pass the rendering tests on most platform+browser
combinations. We tested:
- Chrome, Firefox, Safari on macOS
- Chrome, Firefox on Linux (ubuntu and arch, both running wayland)
- Chrome, Firefox on Windows

Firefox still has some antialiasing issues on Linux platforms, but this
antialiasing also happens on `master`, so this PR is not a regression
there.

The code setting `canvas.style.width` and `canvas.style.height` at the
start of `AppRunner::logic` was also removed - the canvas _display_ size
is now fully controlled by CSS, e.g. by setting `canvas { width: 100%;
height: 100%; }`.

The approach used here is described in
https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

Note: The only remaining place where egui updates the style of the
canvas it is rendering to is some of the IME/mobile input handling code.
Fixing that is out of scope for this PR, and will be done in a followup
PR.
2024-05-27 21:41:28 +02:00
..
.gitignore Rename `docs/` to `web_demo/` 2023-11-16 16:44:30 +01:00
CNAME Rename `docs/` to `web_demo/` 2023-11-16 16:44:30 +01:00
README.md Rename `docs/` to `web_demo/` 2023-11-16 16:44:30 +01:00
example.html Rename `docs/` to `web_demo/` 2023-11-16 16:44:30 +01:00
favicon.ico Rename `docs/` to `web_demo/` 2023-11-16 16:44:30 +01:00
index.html Use ResizeObserver instead of `resize` event (#4536) 2024-05-27 21:41:28 +02:00
multiple_apps.html Rename `docs/` to `web_demo/` 2023-11-16 16:44:30 +01:00

README.md

This folder contains the files required for the egui web demo hosted at https://www.egui.rs/.

Testing locally

Deploying egui.rs

Each merge into master will trigger a new deploy