fix(mobile): lift the iOS Safari toolbar by the measured chrome overlap - #392
Conversation
…ap, not 100vh minus the visual height The phone block lifted the toolbar (and padded .main) by (100vh - --app-height) on iOS Safari to clear a bottom bar that position: fixed elements were assumed to sit behind. On iPhone Safari fixed elements already stop above the bar, and 100vh is the large viewport with the bar collapsed while --app-height is the visual viewport with it expanded, so the expression measures the bar's collapsible height and shows up as an empty band between the toolbar and the bar whenever the bar is expanded. The terminal was padded by the same amount. The lift is now --chrome-overlap, set in updateAppHeight() as innerHeight minus the visual viewport height: the distance the layout viewport that anchors fixed elements extends past the visible area. That is 0 on iPhone Safari, so the toolbar meets the bar, and it is the overlap itself on any browser where fixed elements really do land behind the chrome, so those keep the lift. The keyboard-visible rules, which already override the toolbar offset, are unchanged.
|
Merged and shipped in v1.26.2. Thank you for reporting #391 and then fixing it. Diagnosing One thing you should know, because it affects your other PRs too: no CI ran on this branch at all. GitHub reported it as MERGEABLE rather than failing, and So I validated it locally before merging, in an isolated worktree merged onto current master:
WebKit cannot launch on this machine, so your real-device check on the iPhone 17 Pro Max is the only evidence for the actual Safari behaviour. Please keep including that in the PR body, it is the part I cannot reproduce. #390 is still open on purpose. It touches 20 files, has the same missing-CI situation, and by your own note it interacts with this one, which has now changed the phone block underneath it. It deserves its own release rather than riding along with a small one. |
Fixes #391.
Problem
With the phone layout active on iPhone Safari there is an empty band of about 40 CSS px between the bottom toolbar and Safari's bottom bar whenever the bar is expanded, and the terminal is padded by the same amount. The phone block lifts the toolbar by
(100vh - var(--app-height))on iOS Safari to clear a bar thatposition: fixedelements were assumed to sit behind. On iPhone Safari they already stop above it;100vhis the large viewport with the bar collapsed and--app-heightis the visual viewport with it expanded, so the expression measures the bar's collapsible height instead of an overlap.Change
updateAppHeight()inmobile-handlers.jsnow also sets--chrome-overlaptoinnerHeight - visualViewport.height, the distance the layout viewport that anchors fixed elements extends past the visible area. The two rules inmobile.css(.ios-device.safari-browser .toolbarand.ios-device.safari-browser .main) use that variable in place of100vh - --app-height. On iPhone Safari the value is 0, so the toolbar meets the bar; on any browser where fixed elements really do land behind the chrome it equals the overlap, so the lift is kept there. The keyboard-visible rules, which already override the toolbar offset, are unchanged, andupdateAppHeight()already runs on visual viewport resize and after the keyboard closes, so the value tracks the bar collapsing and expanding.Independent of #390 (applies cleanly on master), but on a 440pt phone the phone block only matches once #390 is in, so the device check below ran with both.
Verification
npm run check:frontend-syntaxandnpm run format:check: passnpm teston this commit stacked on fix(mobile): raise the phone breakpoint from 430px to 600px #390: 351 files passed, 1 skipped; 6755 tests passed, 12 skipped