fix: keep the bottom panels on screen after leaving fullscreen on iPad

[lstein]

The report

On iPad (Chrome), entering fullscreen and leaving it again takes the control and search panels with it. They slide past the bottom of the tablet on the way out and never come back — rotating, resizing and switching to window mode all fail to restore them, and only a reload does. Safari is unaffected.

The cause

They are not hidden. They are laid out below the bottom edge of the screen.

Both panels are position: fixed; bottom: 10px, which resolves against the layout viewport, and iPadOS keeps the taller fullscreen-sized layout viewport after the browser chrome comes back. Ten pixels above that bottom edge is off the tablet, and nothing in the page ever re-lays them out.

The decisive clue was the reporter watching the panels move rather than vanish — an earlier attempt aimed at the hidden-fullscreen class did nothing, because visibility was never the problem.

The fix

panel-anchor.js measures how far the layout viewport's bottom sits below window.visualViewport — the region actually on screen — and translates the anchored elements up by that overshoot, following the viewport from then on. Where the two agree, which is every desktop browser and an iPad that behaves, the offset is zero and no transform is set at all.

The software keyboard produces the same signal, and on iPad it produces it far more often: tapping into the text search field shrinks the visual viewport by the whole keyboard height, which would fling both icon bars up into the middle of the photo at z-index 4000, over the dialog they belong under. Nothing in the geometry tells the two cases apart, so while a text field holds focus the last correction is held rather than recomputed, and focusin/focusout resync so it is recomputed once the keyboard goes away. For the same reason the correction has a 24px floor — pinch-zoom is live (iOS ignores user-scalable=no) and the first fraction of a pinch shrinks the visible area while the scale is still 1.00.

Anchored alongside the panels: #textSearchPanel, which strands identically. Not anchored: the score display, which hangs off the top of the viewport and would be pushed off that edge instead, and .curation-panel, which animates itself with a transform this would overwrite. The back-nav flyout and the bookmark menu clamp against window.innerHeight — the layout bottom that is off the tablet — and now clamp to the exported visibleViewportBottom(), so their bottom rows are not cut off once the panels are reachable again.

Hardening carried along

control-panel.js was making three assumptions a single iPad browser can each break, and being wrong about any of them latches .hidden-fullscreen (opacity: 0 + visibility: hidden, both !important) onto the panels while the app is windowed — unrecoverable, because visibility: hidden also takes the fullscreen button out of hit testing:

• The state is read through the vendor-prefixed properties and the prefixed change events are subscribed to, matching what touch.js already does. The exit chain covers every spelling the state check accepts, including mozCancelFullScreen and webkitCancelFullScreen — neither legacy vendor calls it "exit", and without them the button enters fullscreen once and then does nothing for ever.
• The state is resampled at 0/250/750 ms after each change event: an event delivered while the document still names the outgoing element reads as "still fullscreen", and the exit is animated so the viewport settles after the event.
• resize, orientationchange and visualViewport resize all resync. The last matters most — on a stranded exit the layout viewport does not change, so window.resize may never fire, while the visible area shrinking always does.

Both syncs derive their result from the current state rather than toggling it, which is what makes every extra sample free.

Testing

• tests/frontend/panel-anchor.test.js — overshoot maths, an offset visible area, clearing again, the resync triggers, the keyboard hold and its release, the mid-transition resample, visibleViewportBottom, six no-op cases, and the seam with control-panel.js.
• tests/frontend/fullscreen-panels.test.js — the webkit-only transition, the prefixed request/exit paths including the cancel spelling, a browser with no fullscreen API, a stale-read exit, and all three resync signals.
• Frontend 633 passed, backend 770 passed, ruff/eslint/prettier clean.
• Verified on the reporter's iPad, text search included.

🤖 Generated with Claude Code