The app-shell migration surfaced a mobile-only e2e failure: taps on the bottom-tab bar, the map-toggles menu, and the planet sheet were intercepted by sibling elements despite the targets being on top. Root cause: `.game-shell` used `min-height: 100vh`, so sub-pixel content overflowed the viewport and made the document scrollable. On mobile that scroll toggles the browser's dynamic toolbar, which resizes the viewport and every `position: fixed` overlay (their sizes derive from `100vh`) mid-gesture — defeating Playwright's actionability hit-test, and making the real controls jittery to tap. Pin the shell with `position: fixed; inset: 0` on the mobile breakpoint so it leaves document flow: the document can no longer scroll, the toolbar stays put, the viewport and overlays stay stable, and the active-view area remains the single internal scroll region. Desktop is unchanged (the rule is scoped to max-width: 767.98px). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -671,6 +671,22 @@ return to the lobby still disposes the stores via `onDestroy`.
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
@media (max-width: 767.98px) {
|
@media (max-width: 767.98px) {
|
||||||
|
/*
|
||||||
|
Pin the shell to the viewport on mobile and take it out of
|
||||||
|
document flow. With `min-height: 100vh` the shell can overflow
|
||||||
|
the viewport by a few sub-pixels, which makes the document
|
||||||
|
scrollable; scrolling then toggles the mobile browser's dynamic
|
||||||
|
toolbar, resizing the viewport and the `position: fixed` overlays
|
||||||
|
(map-toggles menu, bottom-tab drawer, planet sheet) mid-gesture.
|
||||||
|
`position: fixed; inset: 0` keeps the viewport — and those
|
||||||
|
overlays — stable, leaving the active-view area as the single
|
||||||
|
internal scroll region.
|
||||||
|
*/
|
||||||
|
.game-shell {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
.body {
|
.body {
|
||||||
padding-bottom: 3.25rem;
|
padding-bottom: 3.25rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user