Skip to content

Evidence — mobile overlay stacking fix (.zer0-bg-body)

Before/after proof for the removal of the child-elevation rule in _sass/theme/_backgrounds.scss (the body now isolates with the noise layer at z-index: -1 instead of forcing position: relative; z-index: 1 on every direct child).

Generated by test/visual/mobile-overlay-stacking-evidence.mjs at 390×844 against two local builds of this repo (BEFORE = the commit prior to the fix, AFTER = the fix). Regression suite: test/visual/features/mobile-overlay-stacking.spec.js — verified to FAIL against the BEFORE build (sidebar scenario) and PASS against the AFTER build.

What to look for

File What it shows
before-sidebar-offcanvas.png /docs/ with #bdSidebar open — the offcanvas title row and × close button are UNDER the fixed header (hit test at the button's center returns span.site-title-text).
after-sidebar-offcanvas.png Same interaction — the offcanvas paints above the header; the close button is the top hit target.
before-navbar-offcanvas.png / after-navbar-offcanvas.png / with #bdNavbar open. (On this repo's own site the backdrop symptom did not reproduce in BEFORE; the :has() header raise is defensive for consumer configs where it did. Links are hit-testable in both.)
before-docs-page.png / after-docs-page.png /docs/ at rest — no horizontal scroll in either state (scrollWidth 390/390); FABs keep position: fixed in AFTER without needing the id-selector specificity escape.
metrics.json / summary.txt Raw hit-test + overflow numbers. Key deltas: sidebar close hit-testable false → true; <main> z-index 1 → auto.

Verified locally: the new suite passes against the AFTER build and fails against the BEFORE build (sidebar scenario), and the core test suite passes 16/16. The full smoke tier (incl. the navbar overflow matrix) runs in CI.