diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index b981a323dcf..190a0d78109 100644
--- a/core/src/components/content/content.tsx
+++ b/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;
@@ -34,6 +36,7 @@ export class Content implements ComponentInterface {
   private backgroundContentEl?: HTMLElement;
   private isMainContent = true;
   private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+  private observerResizeRaf: ReturnType<typeof requestAnimationFrame> | null = null;
   private inheritedAttributes: Attributes = {};
 
   private tabsElement: HTMLElement | null = null;
@@ -168,10 +171,12 @@ export class Content implements ComponentInterface {
         closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
       }
     }
+    this.connectObservers();
   }
 
   disconnectedCallback() {
     this.onScrollEnd();
+    this.disconnectObservers();
 
     if (hasLazyBuild(this.el)) {
       /**
@@ -425,6 +430,95 @@ 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(() => {
+        if (this.observerResizeRaf !== null) {
+          cancelAnimationFrame(this.observerResizeRaf);
+        }
+
+        this.observerResizeRaf = requestAnimationFrame(() => {
+          this.observerResizeRaf = null;
+          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: Node) => {
+              if (node instanceof HTMLElement && (node.tagName === 'ION-HEADER' || node.tagName === 'ION-FOOTER')) {
+                shouldUpdate = true;
+              }
+            });
+
+            mutation.removedNodes.forEach((node: Node) => {
+              if (node instanceof HTMLElement && (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.observerResizeRaf !== null) {
+      cancelAnimationFrame(this.observerResizeRaf);
+      this.observerResizeRaf = null;
+    }
+    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 targets = this.el.parentElement.querySelectorAll(':scope > ion-header, :scope > ion-footer');
+
+    const observer = this.resizeObserver;
+    targets.forEach((target) => observer.observe(target));
+  }
+
   private onScrollStart() {
     this.isScrolling = true;
     this.ionScrollStart.emit({
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts b/core/src/components/content/test/auto-offset/content.e2e.ts
new file mode 100644
index 00000000000..77042188f9d
--- /dev/null
+++ b/core/src/components/content/test/auto-offset/content.e2e.ts
@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import { test, configs } from '@utils/test/playwright';
+
+configs().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);
+
+      await expect(page).toHaveScreenshot(screenshot(`content-auto-offset-footer-updated`));
+    });
+  });
+});
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3f9957f19a1
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a5c61844404
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f5f0e3dced5
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cd585838bbf
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1710b3d807b
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fd247259e64
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..077694b18e4
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2cca58120ea
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8aa3e6527da
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a2f14e43ff0
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7516a695cb3
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e3919ef623c
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..93a4640de4d
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7066e66a236
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..70e140d57e2
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ac06ebbfc9b
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3d70ed20036
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7c378aaf66d
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a0fbbbdd7a5
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6fa81ec1ab1
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..26eb3dde92a
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d68c13f23d1
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e2408a70867
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..279ec5f192a
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d67eb0caf0b
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8ec5ef9aee4
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c5cfb8e0250
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..105c1bd500e
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6c0ee16a171
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4ea938615be
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b8a563cbb08
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a2bb4fed4d7
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fbbc8ae97d2
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..22a08546912
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9e902cf5ee3
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a364df8434d
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/index.html b/core/src/components/content/test/auto-offset/index.html
new file mode 100644
index 00000000000..6c5727f5d75
--- /dev/null
+++ b/core/src/components/content/test/auto-offset/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Content - Auto Offset</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app mode="ios">
+      <ion-header translucent>
+        <ion-toolbar>
+          <ion-title>Auto Offset Test</ion-title>
+        </ion-toolbar>
+        <ion-toolbar id="extra-header-content" style="display: none">
+          <ion-searchbar label="dynamic"></ion-searchbar>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content fullscreen style="--background: blue">
+        <button id="expand-header-btn">Expand Header</button>
+        <br /><br />
+        <button id="expand-footer-btn">Expand Footer</button>
+      </ion-content>
+
+      <ion-footer translucent>
+        <ion-toolbar id="extra-footer-content" style="display: none">
+          <div class="ion-padding">Expanded Footer Area</div>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+    <script>
+      const headerBtn = document.getElementById('expand-header-btn');
+      const footerBtn = document.getElementById('expand-footer-btn');
+      const extraHeaderToolBar = document.getElementById('extra-header-content');
+      const extraFooterToolbar = document.getElementById('extra-footer-content');
+
+      headerBtn.addEventListener('click', () => {
+        extraHeaderToolBar.style.display = 'flex';
+      });
+
+      footerBtn.addEventListener('click', () => {
+        extraFooterToolbar.style.display = 'flex';
+      });
+    </script>
+  </body>
+</html>