fix(map): results map fullscreen falls back to an overlay on iOS
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 9m37s
PR Checks / Backend Smoke (pull_request) Successful in 5s
PR Checks / Build Backend (no push) (pull_request) Successful in 10s
PR Checks / Build Frontend (no push) (pull_request) Successful in 45s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 1m4s
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 9m37s
PR Checks / Backend Smoke (pull_request) Successful in 5s
PR Checks / Build Backend (no push) (pull_request) Successful in 10s
PR Checks / Build Frontend (no push) (pull_request) Successful in 45s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 1m4s
The results-view map's fullscreen button called requestFullscreen(), which iOS Safari doesn't implement (fullscreen is video-only there), so tapping it did nothing on iPhones — the same gap already fixed for the school hero map. When the Fullscreen API is missing or its promise rejects, fall back to a fixed-position overlay (.fsFallback, z-index 5000) driven by state, locking body scroll while open. Leaflet re-measures on window resize, so dispatch a resize when fullscreen toggles (the CSS overlay fires none) or the map would fill only part of the screen. Native fullscreen is unchanged. New e2e journey deletes Element.requestFullscreen on a mobile viewport, opens the results map fullscreen, and asserts the exit control appears then releases; it fails against current production, reproducing the bug. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -75,6 +75,31 @@ test('school hero map opens fullscreen on mobile without the Fullscreen API', as
|
||||
await expect(openMap).toBeVisible();
|
||||
});
|
||||
|
||||
test('results map fullscreen falls back to an overlay on iOS', async ({ page }) => {
|
||||
// Same iOS gap as the hero map: no Element.requestFullscreen, so the results
|
||||
// map's fullscreen button must fall back to a CSS overlay.
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.addInitScript(() => {
|
||||
// @ts-expect-error deliberate API removal
|
||||
delete Element.prototype.requestFullscreen;
|
||||
});
|
||||
|
||||
await searchByName(page, 'B1 1BB');
|
||||
await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
// Switch to the map view, then open the map fullscreen.
|
||||
await page.getByRole('button', { name: 'Map', exact: true }).click();
|
||||
const openFs = page.getByRole('button', { name: 'View map fullscreen' });
|
||||
await expect(openFs).toBeVisible({ timeout: 15_000 });
|
||||
await openFs.click();
|
||||
|
||||
// The button flips to its exit state once the overlay is up.
|
||||
const exitFs = page.getByRole('button', { name: 'Exit fullscreen' });
|
||||
await expect(exitFs).toBeVisible();
|
||||
await exitFs.click();
|
||||
await expect(openFs).toBeVisible();
|
||||
});
|
||||
|
||||
test('comparing two schools shows both side by side', async ({ page }) => {
|
||||
// Collect two school URNs from search results, then load the share URL
|
||||
await searchByName(page, 'primary');
|
||||
|
||||
Reference in New Issue
Block a user