Stop Fixed Bottom Banners From Covering Focused Content

.final-action {
  scroll-margin-block-end: 0;
}

.page { padding-block-end: 80px; }
.final-action {
  scroll-margin-block-end: 80px;
}

Root cause

Fixed positioning removes the banner from normal flow and pins it to the viewport. The document therefore does not automatically reserve space for the overlay. When a focus or scrolling operation aligns the final action with the block-end edge, the banner paints above it.

The fixed fixture combines block-end page space with a matching scroll margin. The page can scroll far enough to place the action above the banner, and focus-driven scrolling uses that reserved position.

Measure visible clearance after focus moves

Tab to the last action and compare its bounding rectangle with the banner’s block-start edge. The important value is the clearance after the browser has scrolled the focused element into view; checking the initial page position can miss the failure. The fixture records a deficit when any part of the action or its focus indicator occupies the banner’s painted region.

Test the banner with its longest translation, error state, and increased text size rather than assuming a permanent 72-pixel height. Also test short landscape viewports and reverse keyboard navigation. If the overlay height is dynamic, derive the reserved space from the actual component or choose a non-fixed layout at constrained heights instead of copying the fixture’s numeric offset.

When this fix is not enough

A fixed offset becomes stale if the banner wraps, grows after localization, or shares the edge with browser UI. On short or landscape viewports, unfixing the banner through a height media query may preserve more usable content. Optional notices can also provide a real close control, but required consent choices need an interaction and focus model appropriate to their legal purpose.

Regression condition

At each recorded viewport, the failing focused action must have positive block-end clearance deficit relative to the banner. The fixed action must end above the banner with zero deficit and retain focus. Both states must have zero page-level horizontal overflow.