fix: re-anchor stray iOS layout-viewport scroll that broke nav taps

2026-07-02 21:48:31 +08:00
parent a73781a048
commit 722457312c
2 changed files with 108 additions and 2 deletions
--- a/tests/viewport-anchor.smoke.spec.js
+++ b/tests/viewport-anchor.smoke.spec.js
@@ -0,0 +1,67 @@
+/**
+ * Smoke test for the layout-viewport anchor guard.
+ *
+ * Bug: on an iPhone running the installed PWA, playing a video sometimes left
+ * the bottom-nav buttons unresponsive. iOS WebKit can scroll the document's
+ * layout viewport behind the app's back (exiting native video fullscreen,
+ * keyboard dismissal, scrollIntoView walking up into <html>) even though the
+ * body is overflow:hidden. Fixed elements are then still drawn in place but
+ * their hit-testing regions are offset by the stray scroll amount, so taps on
+ * the nav do nothing — and no user gesture can scroll the document back.
+ *
+ * The guard (setupViewportAnchorGuard in app.js) snaps the document back to 0
+ * whenever it ends up scrolled, except while an input is focused (so it never
+ * fights the on-screen keyboard); it re-anchors on blur instead.
+ *
+ * The static test page doesn't overflow, so each test injects a tall spacer
+ * and relaxes the overflow clamp — simulating the scrollable-document state
+ * iOS leaves behind.
+ */
+const { test, expect } = require('@playwright/test');
+
+test.describe('Viewport anchor guard — stray document scroll', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.waitForSelector('.app', { state: 'attached' });
+    await page.evaluate(() => {
+      const spacer = document.createElement('div');
+      spacer.style.height = '3000px';
+      document.body.appendChild(spacer);
+      document.documentElement.style.overflow = 'visible';
+      document.body.style.overflow = 'visible';
+    });
+  });
+
+  test('snaps the document back to 0 after a stray window scroll', async ({ page }) => {
+    await page.evaluate(() => {
+      // boot() focuses the search input; release it so the guard is active.
+      if (document.activeElement) document.activeElement.blur();
+      window.scrollTo(0, 400);
+    });
+    await page.waitForFunction(() => window.scrollY === 0);
+    expect(await page.evaluate(() => window.scrollY)).toBe(0);
+  });
+
+  test('leaves the scroll alone while an input is focused (keyboard), re-anchors on blur', async ({ page }) => {
+    await page.evaluate(() => {
+      document.getElementById('searchInput').focus();
+      window.scrollTo(0, 300);
+    });
+    // Guard must not fight the keyboard-driven scroll while editing.
+    await page.waitForTimeout(200);
+    expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0);
+
+    await page.evaluate(() => document.getElementById('searchInput').blur());
+    await page.waitForFunction(() => window.scrollY === 0);
+  });
+
+  test('re-anchors when native video fullscreen exits (webkitendfullscreen)', async ({ page }) => {
+    await page.evaluate(() => {
+      if (document.activeElement) document.activeElement.blur();
+      window.scrollTo(0, 250);
+      document.getElementById('video').dispatchEvent(new Event('webkitendfullscreen'));
+    });
+    await page.waitForFunction(() => window.scrollY === 0);
+    expect(await page.evaluate(() => window.scrollY)).toBe(0);
+  });
+});