alee/golfgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Chrome Android viewport overflow with position fixed game screen

Browse Source 
Use position:fixed with inset:0 for the game screen instead of
height-based sizing. This bypasses the Chrome Android 100vh bug where
vh includes space behind the dynamic URL bar. Also adds
-webkit-fill-available fallback on body.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 14:26:50 -05:00
parent 1c5d6b09e2
commit 097f241c6f
1 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/style.css
View File

@ -4907,6 +4907,7 @@ body.screen-shake {
body.mobile-portrait { body.mobile-portrait {
height: 100vh; height: 100vh;
height: -webkit-fill-available;
height: 100dvh; height: 100dvh;
overflow: hidden; overflow: hidden;
overscroll-behavior: contain; overscroll-behavior: contain;
@ -4915,23 +4916,19 @@ body.mobile-portrait {
body.mobile-portrait #app { body.mobile-portrait #app {
padding: 0; padding: 0;
height: 100vh; height: 100%;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
overflow: hidden; overflow: hidden;
} }
/* --- Mobile: Game screen fills viewport --- */ /* --- Mobile: Game screen fills viewport --- */
/* IMPORTANT: Must include .active to avoid overriding .screen { display: none } */ /* IMPORTANT: Must include .active to avoid overriding .screen { display: none } */
body.mobile-portrait #game-screen.active { body.mobile-portrait #game-screen.active {
height: 100vh; position: fixed;
height: 100dvh; top: 0;
max-height: 100vh; left: 0;
max-height: 100dvh; right: 0;
bottom: 0;
overflow: hidden; overflow: hidden;
margin-left: 0;
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }