Use 100vh and the viewport-fit toggle for the installed app
Researched it instead of guessing again. Launched from the homescreen, WebKit resolves the DYNAMIC viewport and every env() inset once against a provisional geometry and does not revisit them until the geometry is "exercised" — a rotation. That is the whole bug, and it also explains why listening for a signal could never fix it: nothing fires, so there is nothing to observe. Two known workarounds, both applied. Standalone has no toolbars, so 100vh is correct AND stable from the first frame — dvh only exists for the browser's disappearing toolbars, so it now applies only there. And toggling viewport-fit off and back on at boot forces WebKit to recalculate, without the user rotating anything. Countdown moved up off the ad boards — the strip's own projected line is its ceiling now, so it stays in the stands whatever the phone does to the layout, with a 1px shadow to carry it over the crowd. Sources: gist.github.com/fozzedout/5e77925381991a9570151550992baf14 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
9a4d921706
commit
614e1ee469
3 files changed
+33
-7
No files matched your search
@@ -21,6 +21,17 @@ function frame(now) {
|
||||
}
|
||||
|
||||
fitViewport();
|
||||
// iOS PWA cold start. Launched from the homescreen, WebKit resolves the viewport AND every env()
|
||||
// safe-area inset once, against a provisional geometry, and never revisits them until the geometry
|
||||
// is "exercised" — which is why the game only filled the screen after a rotate and back, and why
|
||||
// waiting for an event could never work: nothing fires. Toggling viewport-fit off and on is the
|
||||
// known WebKit workaround: it forces that recalculation without the user rotating anything.
|
||||
// Standalone only, because that is the only mode with the bug.
|
||||
if (navigator.standalone || matchMedia('(display-mode: standalone)').matches) {
|
||||
const meta = document.querySelector('meta[name=viewport]'), real = meta.content;
|
||||
meta.content = real.replace('viewport-fit=cover', 'viewport-fit=auto');
|
||||
requestAnimationFrame(() => { meta.content = real; requestAnimationFrame(fitViewport); });
|
||||
}
|
||||
setupPoint();
|
||||
// warm the pixel HUD font so the canvas never paints a system-serif fallback frame
|
||||
if (document.fonts) { document.fonts.load('700 8px Silkscreen'); document.fonts.load('400 8px Silkscreen'); }
|
||||
|
||||
Reference in new issue
Block a user