R040: Document-level horizontal overflow

What it leaves alone

Overflow of 4px or less, which is rounding and scrollbar noise, and sideways scrolling inside an element, like a wide table in its own scroll container, which does not widen the page. It is not limited to Arabic pages: an overflowing page is broken in any language.

Broken, then fixed

.hero-banner {
  width: 600px;
}

.hero-banner {
  width: 600px;
  max-width: 100%;
}

Check it by hand

With the viewport at phone width, run [document.documentElement.scrollWidth, document.documentElement.clientWidth, [...document.querySelectorAll('body *')].filter((e) => { const r = e.getBoundingClientRect(); return r.right > innerWidth || r.left < 0; }).slice(0, 5)] in the DevTools console. A first number larger than the second is the finding, and the list shows elements sticking out on either side; on a right-to-left page overflow often runs off the left.

What the report shows you

Each R040 finding carries the fields below that apply to it, so you can see why it fired without rerunning the scan.

scrollWidth

How wide the page's content is, in pixels.

clientWidth

How wide the viewport is, in pixels.

breakpoint

mobile, tablet or desktop.

widestElements

The elements that reach furthest past the viewport, with their size: the place to start.