fix(content): automatically recalculate offset when header/footer changes

Previously, ion-content only calculated layout offsets on initialization or window resize. This caused content to be covered or obscured if a header or footer's dimensions changed dynamically (e.g. expanding a searchbar) or if they were added conditionally to the DOM.

This implementation adds a ResizeObserver to watch sibling headers/footers for size changes and a MutationObserver to detect when they are added, triggering an automatic recalculation of the --offset-top and --offset-bottom CSS variables.

Fixes #26981

Author: HappyKnuckles

core/src/components/content/content.tsx

@@ -25,6 +25,8 @@ import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
 })
 export class Content implements ComponentInterface {
   private watchDog: ReturnType<typeof setInterval> | null = null;
+  private mutationObserver: MutationObserver | null = null;
+  private resizeObserver: ResizeObserver | null = null;
   private isScrolling = false;
   private lastScroll = 0;
   private queued = false;
@@ -168,10 +170,12 @@ export class Content implements ComponentInterface {
         closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
       }
     }
+    this.connectObservers();
   }
 
   disconnectedCallback() {
     this.onScrollEnd();
+    this.disconnectObservers();
 
     if (hasLazyBuild(this.el)) {
       /**
@@ -420,6 +424,85 @@ export class Content implements ComponentInterface {
     return promise;
   }
 
+  /**
+   * We need to observe the parent element to detect when
+   * <ion-header> or <ion-footer> elements are added/removed
+   * or resized. This ensures the content offset is recalculated
+   * dynamically.
+   */
+  private connectObservers() {
+    if (!Build.isBrowser) {
+      return;
+    }
+
+    const parent = this.el.parentElement;
+    if (!parent) {
+      return;
+    }
+
+    if ('ResizeObserver' in window) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.resize();
+      });
+    }
+
+    if ('MutationObserver' in window) {
+      this.mutationObserver = new MutationObserver((mutations) => {
+        let shouldUpdate = false;
+
+        for (const mutation of mutations) {
+          if (mutation.type === 'childList') {
+            mutation.addedNodes.forEach((node: any) => {
+              if (node.tagName === 'ION-HEADER' || node.tagName === 'ION-FOOTER') {
+                shouldUpdate = true;
+              }
+            });
+
+            mutation.removedNodes.forEach((node: any) => {
+              if (node.tagName === 'ION-HEADER' || node.tagName === 'ION-FOOTER') {
+                shouldUpdate = true;
+              }
+            });
+          }
+        }
+
+        if (shouldUpdate) {
+          this.refreshResizeObserver();
+          this.resize();
+        }
+      });
+
+      this.mutationObserver.observe(parent, { childList: true });
+    }
+
+    this.refreshResizeObserver();
+  }
+
+  private disconnectObservers() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
+  private refreshResizeObserver() {
+    if (!this.resizeObserver || !this.el.parentElement) {
+      return;
+    }
+
+    this.resizeObserver.disconnect();
+
+    const headers = this.el.parentElement.querySelectorAll('ion-header');
+    const footers = this.el.parentElement.querySelectorAll('ion-footer');
+
+    headers.forEach((header) => this.resizeObserver!.observe(header));
+    footers.forEach((footer) => this.resizeObserver!.observe(footer));
+  }
+
   private onScrollStart() {
     this.isScrolling = true;
     this.ionScrollStart.emit({

core/src/components/content/test/auto-offset/content.e2e.ts

@@ -0,0 +1,52 @@
+import { expect } from '@playwright/test';
+import { test, configs } from '@utils/test/playwright';
+
+configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('content: auto offset'), () => {
+
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/content/test/auto-offset`, config);
+      await page.setIonViewport();
+      await expect(page).toHaveScreenshot(screenshot(`content-auto-offset-initial`));
+    });
+
+    test('should update offsets when header height changes', async ({ page }) => {
+      await page.goto(`/src/components/content/test/auto-offset`, config);
+      await page.setIonViewport();
+
+      const content = page.locator('ion-content');
+      const before = await content.evaluate((el: HTMLElement) =>
+        getComputedStyle(el).getPropertyValue('--offset-top')
+      );
+
+      await page.click('#expand-header-btn');
+
+      await expect(content).not.toHaveCSS('--offset-top', before);
+
+      await expect(page).toHaveScreenshot(screenshot(`content-auto-offset-header-updated`));
+    });
+
+    test('should update offsets when footer height changes', async ({ page }) => {
+      await page.goto(`/src/components/content/test/auto-offset`, config);
+      await page.setIonViewport();
+
+      const content = page.locator('ion-content');
+      const before = await content.evaluate((el: HTMLElement) =>
+        getComputedStyle(el).getPropertyValue('--offset-bottom')
+      );
+
+      await page.click('#expand-footer-btn');
+
+      await expect(content).not.toHaveCSS('--offset-bottom', before);
+
+      const after = await content.evaluate((el: HTMLElement) =>
+        getComputedStyle(el).getPropertyValue('--offset-bottom')
+      );
+
+      expect(after).not.toBe(before);
+
+      await expect(page).toHaveScreenshot(screenshot(`content-auto-offset-footer-updated`));
+    });
+
+  });
+});