1
0
mirror of https://github.com/emilk/egui.git synced 2026-08-29 04:40:03 -04:00

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.
This commit is contained in:
Jan Procházka
2024-05-27 21:41:28 +02:00
committed by GitHub
parent a8b50e6aa1
commit 759c8fd2c9
7 changed files with 121 additions and 64 deletions

View File

@@ -237,7 +237,14 @@ web-sys = { workspace = true, features = [
"MediaQueryListEvent",
"MouseEvent",
"Navigator",
"Node",
"NodeList",
"Performance",
"ResizeObserver",
"ResizeObserverEntry",
"ResizeObserverBoxOptions",
"ResizeObserverOptions",
"ResizeObserverSize",
"Storage",
"Touch",
"TouchEvent",