BUG-044
ID:BUG-044Status:fixed

After a drawer has been opened, the sticky site header trails behind page scrolling on iOS Safari

Severity:majorSource:SPEC-060
main View source

Criteria completion

Criteria completion: 1 of 3 (33%) checked; history from Oct 22 to Oct 220%25%50%75%100%Oct 22Oct 22

Relationships

Implements 1
Related 1
Branches 2
main current fixed
claude/site-changelog-readability-k4p902 fixedchangeset-release/main in-progress
History 4
  1. 7ddaa4c
    • ☑ On iOS Safari, the sticky header stays pinned while scrolling after a drawer has been opened and closed
    by bjornolofandersson
  2. 81eddba
    Content editedby Claude
    plan: BUG-044 fixed
  3. 926fcd0
    Created (in-progress)by bjornolofandersson
  4. 49d4f93
    Content editedby Claude
    drawer: lock page scroll on <html> only (BUG-044)

Steps to Reproduce

  1. On iOS Safari, open a page whose default layout has the sticky .rf-header (for example a release page under /releases/).
  2. Open a drawer through a {% ref preview="drawer" %} link, then close it.
  3. Scroll the page.

Expected

The header stays pinned to the top of the viewport, as it does before any drawer is opened.

Actual

The header trails behind the scroll and catches up once scrolling settles, as though it were animated. It begins only after a drawer has been opened, and it lasts until the page is reloaded.

Environment

  • Mobile Safari (reported on iOS, possibly other browsers too); not reproducible in headless Chromium
  • @refrakt-md/skeleton 0.41.1, @refrakt-md/behaviors 0.41.1

Cause

The drawer's scroll lock (packages/skeleton/styles/runes/drawer.css) set overflow: hidden on both html and body while a drawer was open. With both locked, body becomes a scroll container of its own. Toggling that is a long-standing WebKit trigger for sticky and fixed elements to be repositioned on the main thread rather than with the compositor's scroll, so they trail behind it. Locking the root alone is enough to stop the page scrolling under the modal: iOS Safari has honoured overflow: hidden on html since iOS 16.

Acceptance Criteria

  • The scroll lock sets overflow: hidden on html only, not on body
  • Scrolling inside an open drawer's body does not chain to the page (overscroll-behavior: contain)
  • On iOS Safari, the sticky header stays pinned while scrolling after a drawer has been opened and closed

Resolution

Completed: 2026-10-22

Branch: claude/site-changelog-readability-k4p902

What was done

  • packages/skeleton/styles/runes/drawer.css: the scroll lock sets overflow: hidden on html.rf-drawer-open only, no longer on body as well.
  • packages/skeleton/styles/runes/drawer.css: overscroll-behavior: contain on dialog.rf-drawer .rf-drawer__body, so scrolling inside a drawer does not chain to the page.
  • packages/lumina/styles/runes/drawer.css: header comment updated to match.
  • .changeset/skeleton-drawer-scroll-lock.md: skeleton patch.

Notes

  • Not reproducible in headless Chromium; confirmed fixed on iOS Safari against the PR's Cloudflare preview.
  • The mobile-menu behavior also locks <body> overflow and may cause the same lag; not changed here.