UI: pin the SPA document so iOS/WKWebView cannot rubber-band the page
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 43s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m1s
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 43s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m1s
On iOS (notably the Telegram Mini App) the document elastic-overscrolls on a vertical drag even with overscroll-behavior:none — the whole page stretches and bounces, and it fought the board's swipe-to-open-history. Telegram's own swipe-to-minimise is already disabled at launch; this removes the remaining WebKit document bounce by pinning the document (position:fixed + overflow:hidden) for the game SPA only. Every screen already fits the visual viewport (--vvh) and scrolls its own inner areas, so the document never needed to scroll. Scoped to the app via an `app-shell` class set in main.ts; the standalone landing page (landing.ts) keeps its normal scrolling document. e2e locks the contract on both entries.
This commit is contained in:
@@ -28,3 +28,20 @@ test('guest reaches a board and previews a placement', async ({ page }) => {
|
||||
// The contextual MakeMove control (✅) appears once a tile is pending.
|
||||
await expect(page.locator('.make')).toBeVisible();
|
||||
});
|
||||
|
||||
// The SPA pins the document so iOS/WKWebView cannot rubber-band the whole page on a vertical
|
||||
// drag (the elastic bounce that fought the board's swipe-to-open-history). The native bounce
|
||||
// itself is not reproducible in Playwright, so we assert the CSS contract that suppresses it.
|
||||
test('the app pins the document so the page cannot rubber-band', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await expect(page.getByRole('button', { name: /guest/i })).toBeVisible();
|
||||
|
||||
const lock = await page.evaluate(() => ({
|
||||
shell: document.documentElement.classList.contains('app-shell'),
|
||||
htmlOverflow: getComputedStyle(document.documentElement).overflowY,
|
||||
bodyPosition: getComputedStyle(document.body).position,
|
||||
}));
|
||||
expect(lock.shell).toBe(true);
|
||||
expect(lock.htmlOverflow).toBe('hidden');
|
||||
expect(lock.bodyPosition).toBe('fixed');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user