From 7b879fec3d30b61c00faad035698ff643afaa78e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 13 Feb 2023 14:59:42 -0500
Subject: [PATCH] fix(content): fullscreen works when rotating device (#26782)

resolves #26743
---
 core/src/components/content/content.tsx | 30 +++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 99f50d5c89..c60fbe9cf0 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -30,6 +30,7 @@ export class Content implements ComponentInterface {
   private scrollEl?: HTMLElement;
   private backgroundContentEl?: HTMLElement;
   private isMainContent = true;
+  private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
   // Detail is used in a hot loop in the scroll event, by allocating it here
   // V8 will be able to inline any read/write to it since it's a monomorphic class.
@@ -123,6 +124,35 @@ export class Content implements ComponentInterface {
     this.resize();
   }
 
+  /**
+   * Rotating certain devices can update
+   * the safe area insets. As a result,
+   * the fullscreen feature on ion-content
+   * needs to be recalculated.
+   *
+   * We listen for "resize" because we
+   * do not care what the orientation of
+   * the device is. Other APIs
+   * such as ScreenOrientation or
+   * the deviceorientation event must have
+   * permission from the user first whereas
+   * the "resize" event does not.
+   *
+   * We also throttle the callback to minimize
+   * thrashing when quickly resizing a window.
+   */
+  @Listen('resize', { target: 'window' })
+  onResize() {
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = null;
+    }
+
+    this.resizeTimeout = setTimeout(() => {
+      this.resize();
+    }, 100);
+  }
+
   private shouldForceOverscroll() {
     const { forceOverscroll } = this;
     const mode = getIonMode(this);