Skip to content

Size the sidebar and member bars from the viewport without the keyboard - #290

Merged
tony merged 1 commit into
mainfrom
fix/keyboard-viewport-sidebar
Nov 9, 2026
Merged

tony merged 1 commit into
mainfrom
fix/keyboard-viewport-sidebar

Conversation

@tony

@tony tony commented Nov 8, 2026

Copy link
Copy Markdown
Contributor

Chrome on iOS shrinks window.innerHeight while the on-screen keyboard is up, even the floating one; Safari does not. Opening the reference sidebar's symbol picker focuses its filter input, so fitSidebar sized the sticky sidebar from the shrunken height: the column and picker list were cut at the keyboard's top edge and stayed cut after the keyboard closed. ApiPageContents decides whether the member and group bars stick from the same innerHeight, so the bars switched sticky off and on with the keyboard; that is the likely source of the cut-off 'Common operations' bar in the first report. I could not reproduce that band in WebKit directly, so this is a fix from the cause, not from a captured band.

What changes: stableViewportHeight keeps the tallest innerHeight seen at the current width while a field has focus, and is plain innerHeight otherwise; a new width or orientation starts over. fitSidebar and the sticky-bars room check use it, and both recompute on visualViewport resize and two frames after focusout, so they recover when the keyboard closes. CSS lvh/svh was not used: fitSidebar measures against the column's bounds in script, and CSS units do not follow Chrome iOS's frame resize consistently.

Before: with a field focused and innerHeight 342 of 696, --api-nav-height was 342px and the member bars lost data-api-sticky-members. After: both hold until blur, then follow the real height.

Test plan:

  • site/test/stable-viewport.test.ts (simulated keyboard: shrink innerHeight, fire resize while a field has focus, blur); both cases fail on main and pass here
  • vitest api-tree*, api-sidebar*, api-page-contents, anchor-navigation: 358 passed, 16 skipped
  • oxlint on the changed files
  • CI test check

why: In Chrome on iOS, opening the sidebar's symbol picker focuses its
filter input and the keyboard, even the floating one, shrinks
window.innerHeight. The sticky sidebar took its height from
innerHeight, so it was cut at the keyboard's top edge and stayed
that way after the keyboard closed. The member and group bars decided
whether to stick from the same value, so they switched off and on with
the keyboard. Safari leaves innerHeight alone and never showed either.

what:
- Add stableViewportHeight, which keeps the tallest innerHeight seen at
  the current width while a field has focus, and is innerHeight any
  other time; a new width or orientation starts over
- Size the sidebar from it, and recompute on visualViewport resize and
  two frames after focusout, so it recovers when the keyboard closes
- Use the same rule for the sticky member bars' room check, and
  recompute them after focusout
- Test both with a simulated keyboard (shrink innerHeight, fire resize
  while a field has focus); both fail without the change
@tony
tony merged commit 9a20cea into main Nov 9, 2026
2 of 3 checks passed
@tony
tony temporarily deployed to docs-preview-cleanup November 9, 2026 13:38 — with GitHub Actions Inactive
tony added a commit that referenced this pull request Nov 9, 2026
…ts (#291)

why: Six ports had docs branches ready but no published site, and
three shared fixes were waiting behind them. Releasing them together
gives one docs commit to trust for deployment and one set of caller
pins to move, instead of six separate waves.

what:
- Add OCaml (#264), Haskell (#265), Erlang (#266, #278, #279, #280,
  #284, #292), Common Lisp (#268), Perl (#274) and Clojure (#276):
  native API pages, tested guides, navigation, landing and switcher
  entries, and cross-reference data for each
- Keep browser checks from loading third-party resources, and pass
  the check origin to the three scripts that named an undefined base
  (#287)
- Render guide badges at build time instead of hotlinking shields
  (#288)
- Size the reference sidebar and member bars from the viewport, so
  the Chrome iOS keyboard no longer shrinks them (#290)
- Make the OCaml model producer verify its native build inputs in
  their checkout and reject stale ones, with controls run in CI
- Offer one switcher page per port, and title Perl's workspace guide
  "Workspace guide"
- Regenerate the registry, mention index and cross-reference counts
  for the combined port set

Base main 2593131, head dabe59b. Port heads: #264 7d4f88f
and 73fb1ad, #265 dc024e3, #268 947da1f, #274 818fa2e,
#276 a134503, #287 a437e97, #292 e7740d9.

This branch was previously deployed

1 inactive deployment
docs-preview-cleanup — ed670eed Deployed Nov 9, 2026 by tony via cleanup #229
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant