Findings / UX-057

The toolbars come back on any small scroll up, taking screen and moving the page

OpenMediumFailureFirefox on iPad

What we saw

Scrolled down, Firefox shows only a thin address line and the page gets almost the whole screen (first screenshot: the newsroom header starts about 90 px down a 1,640 px screen). Any small scroll up restores the tab strip and full address bar (second screenshot: the header starts about 270 px down), about 180 px or 11% of the screen, and the page content shifts down by that much while it is being read. The hidden state is the one wanted all the time. What brings them back is not the distance scrolled: see UX-058 for how they are hidden, which depends on the speed of the gesture.

Why it matters

The reader scrolls up a line to re-read a sentence and the whole page jumps, the text moves away from their eyes, and a toolbar they did not ask for takes a ninth of the screen. Each time, attention goes to the chrome instead of the text.

The fix

For the browser: keep the toolbars hidden until a deliberate gesture (a tap on the address line, or a scroll to the very top), and offer a setting to keep them collapsed. For the sites, on our side of the line: keep our own sticky header as small as it can be, because it stacks on top of the browser's (on this page the newsroom's header takes about another 110 px).

What good looks like: EX-001 Safari on iPad hides its toolbars the same way every time, after a small scroll.

The record

Previous: UX-056 Scrolling back up a little puts focus in the address bar and opens the keyboard

Next: UX-058 Whether the toolbars hide depends on how fast you scroll, not how far