fix(content): adjusted PR requests

Author: HappyKnuckles

core/src/components/content/content.tsx

@@ -36,6 +36,7 @@ export class Content implements ComponentInterface {
   private backgroundContentEl?: HTMLElement;
   private isMainContent = true;
   private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+  private observerResizeTimeout: ReturnType<typeof setTimeout> | null = null;
   private inheritedAttributes: Attributes = {};
 
   private tabsElement: HTMLElement | null = null;
@@ -441,10 +442,14 @@ export class Content implements ComponentInterface {
     }
 
     if ('ResizeObserver' in window) {
-      let timeout: any;
       this.resizeObserver = new ResizeObserver(() => {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => this.resize(), 100);
+        if (this.observerResizeTimeout !== null) {
+          clearTimeout(this.observerResizeTimeout);
+        }
+        this.observerResizeTimeout = setTimeout(() => {
+          this.observerResizeTimeout = null;
+          this.resize();
+        }, 100);
       });
     }
 
@@ -481,6 +486,10 @@ export class Content implements ComponentInterface {
   }
 
   private disconnectObservers() {
+    if (this.observerResizeTimeout !== null) {
+      clearTimeout(this.observerResizeTimeout);
+      this.observerResizeTimeout = null;
+    }
     if (this.mutationObserver) {
       this.mutationObserver.disconnect();
       this.mutationObserver = null;
@@ -498,17 +507,10 @@ export class Content implements ComponentInterface {
 
     this.resizeObserver.disconnect();
 
-    const headers = this.el.parentElement.querySelectorAll('ion-header');
-    const footers = this.el.parentElement.querySelectorAll('ion-footer');
+    const targets = this.el.parentElement.querySelectorAll(':scope > ion-header, :scope > ion-footer');
 
     const observer = this.resizeObserver;
-
-    if (observer === null || observer === undefined) {
-      return;
-    }
-
-    headers.forEach((header) => observer.observe(header));
-    footers.forEach((footer) => observer.observe(footer));
+    targets.forEach((target) => observer.observe(target));
   }
 
   private onScrollStart() {

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

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { test, configs } from '@utils/test/playwright';
 
-configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
+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);
@@ -36,12 +36,6 @@ configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
 
       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`));
     });
   });