From c1aa8b8ce29b10078b5937a8266466b33b82d37a Mon Sep 17 00:00:00 2001
From: jprochazk <1665677+jprochazk@users.noreply.github.com>
Date: Thu, 6 Jun 2024 09:50:35 +0200
Subject: [PATCH 1/2] move `request_animation_frame` to resize observer

---
 crates/eframe/src/web/app_runner.rs |  1 +
 crates/eframe/src/web/events.rs     | 18 ++++++++++++++++++
 crates/eframe/src/web/web_runner.rs |  3 +--
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/crates/eframe/src/web/app_runner.rs b/crates/eframe/src/web/app_runner.rs
index f8b7f14a9da..8c8d033da1e 100644
--- a/crates/eframe/src/web/app_runner.rs
+++ b/crates/eframe/src/web/app_runner.rs
@@ -188,6 +188,7 @@ impl AppRunner {
     /// The result can be painted later with a call to [`Self::run_and_paint`] or [`Self::paint`].
     pub fn logic(&mut self) {
         let canvas_size = super::canvas_size_in_points(self.canvas(), self.egui_ctx());
+        log::info!("LOGIC {canvas_size:?}");
         let raw_input = self.input.new_frame(canvas_size);
 
         let full_output = self.egui_ctx.run(raw_input, |egui_ctx| {
diff --git a/crates/eframe/src/web/events.rs b/crates/eframe/src/web/events.rs
index c8ddcf6c205..b514a669cd2 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();
@@ -622,12 +630,22 @@ pub(crate) fn install_resize_observer(runner_ref: &WebRunner) -> Result<(), JsVa
                         return;
                     }
                 };
+                log::info!(
+                    "ResizeObserver canvas={:?} to={:?}",
+                    super::canvas_size_in_points(canvas, runner_lock.egui_ctx()),
+                    (width, height),
+                );
                 canvas.set_width(width);
                 canvas.set_height(height);
 
                 // 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<dyn FnMut(js_sys::Array)>);
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(())

From 02e7a44660646cb21e46eb6fcf62c512cab12fe7 Mon Sep 17 00:00:00 2001
From: jprochazk <1665677+jprochazk@users.noreply.github.com>
Date: Thu, 6 Jun 2024 09:52:05 +0200
Subject: [PATCH 2/2] remove logs

---
 crates/eframe/src/web/app_runner.rs | 1 -
 crates/eframe/src/web/events.rs     | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/crates/eframe/src/web/app_runner.rs b/crates/eframe/src/web/app_runner.rs
index 8c8d033da1e..f8b7f14a9da 100644
--- a/crates/eframe/src/web/app_runner.rs
+++ b/crates/eframe/src/web/app_runner.rs
@@ -188,7 +188,6 @@ impl AppRunner {
     /// The result can be painted later with a call to [`Self::run_and_paint`] or [`Self::paint`].
     pub fn logic(&mut self) {
         let canvas_size = super::canvas_size_in_points(self.canvas(), self.egui_ctx());
-        log::info!("LOGIC {canvas_size:?}");
         let raw_input = self.input.new_frame(canvas_size);
 
         let full_output = self.egui_ctx.run(raw_input, |egui_ctx| {
diff --git a/crates/eframe/src/web/events.rs b/crates/eframe/src/web/events.rs
index b514a669cd2..acb162c04b1 100644
--- a/crates/eframe/src/web/events.rs
+++ b/crates/eframe/src/web/events.rs
@@ -630,11 +630,6 @@ pub(crate) fn install_resize_observer(runner_ref: &WebRunner) -> Result<(), JsVa
                         return;
                     }
                 };
-                log::info!(
-                    "ResizeObserver canvas={:?} to={:?}",
-                    super::canvas_size_in_points(canvas, runner_lock.egui_ctx()),
-                    (width, height),
-                );
                 canvas.set_width(width);
                 canvas.set_height(height);