diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 99f50d5c89e..c60fbe9cf0b 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 | 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);