diff --git a/crates/eframe/src/web/events.rs b/crates/eframe/src/web/events.rs index c8ddcf6c205..acb162c04b1 100644 --- a/crates/eframe/src/web/events.rs +++ b/crates/eframe/src/web/events.rs @@ -608,6 +608,14 @@ pub(crate) fn install_canvas_events(runner_ref: &WebRunner) -> Result<(), JsValu Ok(()) } +/// Install a `ResizeObserver` to observe changes to the size of the canvas. +/// +/// This is the only way to ensure a canvas size change without an associated window `resize` event +/// actually results in a resize of the canvas. +/// +/// The resize observer is called the by the browser at `observe` time, instead of just on the first actual resize. +/// We use that to trigger the first `request_animation_frame` _after_ updating the size of the canvas to the correct dimensions, +/// to avoid [#4622](https://github.com/emilk/egui/issues/4622). pub(crate) fn install_resize_observer(runner_ref: &WebRunner) -> Result<(), JsValue> { let closure = Closure::wrap(Box::new({ let runner_ref = runner_ref.clone(); @@ -628,6 +636,11 @@ pub(crate) fn install_resize_observer(runner_ref: &WebRunner) -> Result<(), JsVa // force an immediate repaint runner_lock.needs_repaint.repaint_asap(); paint_if_needed(&mut runner_lock); + drop(runner_lock); + // we rely on the resize observer to trigger the first `request_animation_frame`: + if let Err(err) = runner_ref.request_animation_frame() { + log::error!("{}", super::string_from_js_value(&err)); + }; } } }) as Box); diff --git a/crates/eframe/src/web/web_runner.rs b/crates/eframe/src/web/web_runner.rs index 9c97b6a73dd..eea9ab647e3 100644 --- a/crates/eframe/src/web/web_runner.rs +++ b/crates/eframe/src/web/web_runner.rs @@ -79,9 +79,8 @@ impl WebRunner { events::install_color_scheme_change_event(self)?; } + // The resize observer handles calling `request_animation_frame` to start the render loop. events::install_resize_observer(self)?; - - self.request_animation_frame()?; } Ok(())