Skip to content

Mobile editing: app-shell layout with reliable caret visibility (WIP) #352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
johannesmutter wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Mobile editing: app-shell layout with reliable caret visibility (WIP) #352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d44cc7f
fix: don't scroll annotations into view that are already in view in t…
johannesmutter Jul 21, 2026
406e71f
Mobile editing: app-shell layout with reliable caret visibility
johannesmutter Jul 22, 2026
cd0e9f6
Simplify shell wiring: first-paint edit mode, library-owned keyboard …
johannesmutter Jul 22, 2026
afc59a4
Chrome zones: document device-verified compositing limits, keep tint …
johannesmutter Jul 22, 2026
0180d33
cleanup
johannesmutter Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,28 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<!-- interactive-widget=resizes-content makes Chromium and Firefox on Android
resize the layout viewport when the virtual keyboard opens, so the
fixed bottom toolbar stays above the keyboard without JS. iOS Safari
ignores it and is handled via visualViewport in Toolbar.svelte.
No viewport-fit=cover: it makes env(safe-area-inset-bottom) span
Safari's floating tab bar, pushing the bottom toolbar too far up.
<!-- No interactive-widget=resizes-content: iOS 26 no longer ignores it
and engages it inconsistently (layout viewport resizing mid-gesture
on refocus taps, breaking the app-shell geometry and blurring the
canvas). Without the token iOS stays in its stable overlay mode
(visual viewport shrinks, layout viewport untouched), which the
app shell + Svedit's keyboard handling are built for. Android
Chrome's default is resizes-content anyway, so Android behavior
is unchanged.
No viewport-fit=cover: device-verified on iOS 26 that it does NOT
extend the in-browser layout viewport, so it buys nothing here
while making env(safe-area-inset-bottom) span Safari's floating
tab bar and push the bottom toolbar up. Also device-verified:
Safari composites only root-document overflow behind its chrome
— fixed boxes beyond the layout viewport do not paint there, so
a locked app shell can only tint those zones (see reset.css).
maximum-scale=1 suppresses iOS Safari's auto-zoom when focusing
inputs with a font size below 16px; since iOS 10 Safari ignores it
for user pinch gestures, so zooming stays possible there. Trade-off:
Android honors it and blocks pinch zoom. -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, interactive-widget=resizes-content"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
%sveltekit.head%
</head>
Expand Down
Loading