Page can freeze because body is turned into a scroll container by overflow-x: hidden

Problem/Motivation

Vartheme BS5 Educare can leave a page that cannot be scrolled. The mouse wheel does nothing, the keyboard does nothing, and a second scrollbar appears inside the page instead of at the edge of the window. A visitor who lands on such a page cannot reach anything below the first screen.

The cause is one declaration at the end of scss/layout/edge2edge.layout.scss, with its compiled twin in css/layout/edge2edge.layout.css:

body {
  overflow-x: hidden !important;
}

It is there to hide horizontal overflow. The edge-to-edge band (.bg-edge2edge) sizes itself from 100vw, and 100vw includes the classic scrollbar while the content box does not, so every edge-to-edge section ends up a scrollbar width wider than the page. On a Drupal 11 site with the theme installed, 31 elements on the front page overflow by 16px.

The clipping is not the problem. hidden is. Per CSS Overflow Module Level 3, an overflow-x of hidden forces an overflow-y of visible to compute to auto. So body computes to overflow: hidden auto on every page: the theme turns body into a scroll container on every request.

Most of the time this is invisible, because the browser propagates the body overflow up to the viewport and the viewport keeps scrolling. The moment anything stops that propagation, by giving html an overflow of its own (an admin toolbar, a scroll lock, a modal or offcanvas backdrop), the viewport can no longer scroll and body cannot either, because its height is its content height. The page is frozen, with a stray inner scrollbar and no way to move it.

The frozen page has not been reproduced on demand. What is measured and reproducible is the latent state that makes it possible, on every page of every site using the theme.

Steps to reproduce

1. Install Vartheme BS5 Educare on a Drupal 11 site and open any page carrying an edge-to-edge section.
2. In the browser console, read getComputedStyle(document.body).overflowY. It returns auto, not visible: body is a scroll container.
3. Read document.documentElement.scrollWidth - document.documentElement.clientWidth. It returns a scrollbar width, not 0.
4. From devtools, set html { overflow: hidden }, which is what any scroll lock does. The page can no longer be scrolled by wheel or keyboard, and a second scrollbar appears inside the page.

Measured on Drupal 11.4.6 with Vartheme BS5 5.0.2, the theme this one is cloned from, and on two live Drupal 11 sites built on this theme as an anonymous visitor on 13 September 2026: body computes hidden / auto on all of them.

Proposed resolution

Clip the overflow with overflow-x: clip instead of overflow-x: hidden, and declare it on html as well as body.

clip clips without creating a scroll container, and it leaves overflow-y as visible, so vertical scrolling always stays on the viewport and the freeze becomes impossible. Declaring it on html too makes the viewport authoritative, which also removes the last pixels of sideways scroll and stops anything else setting html { overflow } from bringing the lockup back. An overflow-x: hidden declaration stays first as the fallback for browsers without clip, and the existing !important stays, because it is what beats the admin theme for signed-in users.

html,
body {
  overflow-x: hidden !important; // Fallback for browsers without `clip`.
  overflow-x: clip !important;
}

Verified on a Drupal 11.4.6 site across 5 pages, 4 screen sizes (1568x744, 1400x800, 768x900, 390x844), as an anonymous visitor and as an administrator, 30 combinations in all. After the change html and body both compute clip / visible, the mouse wheel and the End key both scroll to the exact bottom of every page, horizontal scroll is 0 where it was 16px, and the sticky header and the full-bleed edge-to-edge sections are geometrically unchanged.

This theme is a clone of Vartheme BS5 and carries its own independent copy of the declaration, so it needs the same change here. Fixed upstream in #3622794, where the reasoning and the measurements were first recorded.

Remaining tasks

• ✅ File an issue
• ✅ Addition/Change/Update/Fix
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ✅ Update Release Notes
• ❌ Release

User interface changes

• None. Pages look the same. What changes is that they can always be scrolled, and the page can no longer be nudged sideways by a scrollbar width.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Fixed a case where a page could not be scrolled at all, by the mouse wheel or the keyboard, and showed a second scrollbar inside the page.

AI was used in the drafting of this issue summary and in the investigation behind it. The CSS behaviour described was measured in a browser and checked against the CSS Overflow Module Level 3 specification, not taken from the model.