sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend-http): map fullscreen fallback for mobile Safari

Browse Source 
Mobile Safari (iOS) blocks requestFullscreen() on non-video elements,
so the Fullscreen button silently did nothing.

Add a CSS-based fake fullscreen path:
- mapEnterFakeFullscreen() adds .map-fake-fullscreen to #map-stage
  (position:fixed; inset:0; z-index:9000; height:100dvh) and
  map-fake-fullscreen-active to <body> (overflow:hidden).
- toggleMapFullscreen() tries native fullscreen first; catches the
  thrown NotAllowedError (or any other error) and falls back to the
  CSS path. Also handles the case where requestFullscreen is absent.
- mapIsFullscreen() checks for the CSS class in addition to the
  native fullscreen element references.
- mapExitFakeFullscreen() removes both classes on exit.
- Escape key exits CSS fake fullscreen (native handles its own Escape).
- sizeAprsMapToViewport() uses window.innerHeight for the fake path
  since clientHeight may not reflect fixed layout synchronously.
- sizeAprsMapToViewport() is called via requestAnimationFrame after
  toggling so layout is settled before the Leaflet invalidateSize().

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-10 19:01:48 +01:00
parent 2e8f025b19
commit 9a398f3754
2 changed files with 73 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+17 -2
View File
@@ -1174,16 +1174,31 @@ small { color: var(--text-muted); }
color: var(--text-heading);
}
#map-stage:fullscreen,
#map-stage:-webkit-full-screen {
#map-stage:-webkit-full-screen,
#map-stage.map-fake-fullscreen {
background: var(--bg);
width: 100%;
height: 100%;
padding: 0;
box-sizing: border-box;
}
/* CSS-based fake fullscreen for browsers that block the Fullscreen API
(notably mobile Safari, which only allows fullscreen for <video>). */
#map-stage.map-fake-fullscreen {
position: fixed;
inset: 0;
z-index: 9000;
height: 100dvh;
}
body.map-fake-fullscreen-active {
overflow: hidden;
touch-action: none;
}
#map-stage:fullscreen #aprs-map,
#map-stage:-webkit-full-screen #aprs-map {
#map-stage:-webkit-full-screen #aprs-map,
#map-stage.map-fake-fullscreen #aprs-map {
border-radius: 0;
height: 100% !important;
}
.aprs-controls { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.75rem; }
.aprs-controls > button.active,