Mobile / touch · M.4
Reflow instead of clip
A drawer that will not close, so you saw the back off the drawer.
Side-by-side content restacking into one column at phone width, set against the fixed-height-plus-overflow-hidden version that silently deletes whatever did not fit.
4 knobs
How it actually works
This is the worst outcome of a mobile squeeze because it is content loss rather than a layout complaint, and it is the one a screenshot actively hides: a guillotined section photographs as a section that ends there. On one of our own pages it removed 160px off the bottom of an outcomes scene on a 640px-tall phone, which was real figures from a real person's record, and the page had been reviewed and signed off on a desktop window.
The reflow half is ordinary: a grid or flex row that becomes one column, with every fixed height released to auto, so the content is longer and nothing is lost. The anti-pattern half is a container holding a fixed height, typically 100vh or a pinned scroll frame, with overflow: hidden on it. On a desktop that is a large canvas; on a phone every scene inside it is single-column and two to three times taller, so the bottom is cut off. There is no scrollbar and no overflow, because overflow: hidden means the page never grows, so nothing measures as wrong and the cut edge looks intentional.
The knobs, named
Mode, container height, viewport width, and an overlay that shows what the clip is eating. All four are ours: this pairing is our own contrast between a defect we shipped and the fix we shipped for it, and no source names a parameter for it.
| Knob | Source | What it teaches |
|---|---|---|
| Mode | ours | The whole feature is this switch. Reflow makes the page longer; clip makes it shorter and quieter, and quieter is why it ships. |
| Container height | ours | The fixed box, standing in for the 100vh a pinned section takes. Every pixel of content past it is gone, not scrollable. |
| Viewport width | ours | Narrow it and the two columns become one, the content gets taller, and the clip starts eating. This is exactly the desktop-to-phone transition that produced the real bug. |
| Show what is cut | ours | Off is what a reviewer sees: a section that appears to end. On, the lost content is drawn below the cut line in red with the pixel count. The difference between the two is the entire argument. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (ours, shipped)
Our own shipped code: clients/tabblabs/build/qdeneanpeace/styles.css, the block headed "WHY this section exists (2026-07-21)". Measured verbatim at 320x640 with motion ON: track-impact pin=640px content=800px -> 160px CUT OFF by overflow:hidden, and track-lc pin=640px content=691px -> 51px CUT OFF. The fix ships in that file: below 880px the tracks unpin, the scenes return to normal flow and every scrubbed value is neutralised to its complete state. The instrument that names it is our own kit/mobile-audit.cjs CLIPPED check, added the same day. No third-party source.
- Seen on
- Our own qdeneanpeace build (shipped, and shipped broken first).
- Dependencies
- vanilla CSS
- Difficulty
- easy to fix, invisible to review
- Performance
- Reflow is free. The clip is also free, which is part of why it survives review: it costs nothing and breaks nothing measurable.
- Accessibility and the floor
- Clipped content is unreachable by every route, including a screen reader following the DOM, because it is still in the accessibility tree with a rendered box that is off the visible area of a container nothing can scroll. It fails 1.4.10 Reflow outright, and it is one of the few failures where the content is simply gone rather than awkward.
Notes
Composability. It is the rule the scroll-driven category has to obey on a phone. Any pinned section (1.2, 1.13, 1.15, 1.17, 12.1) is a fixed-height overflow-hidden box by construction, so each of them needs an unpinned floor at phone width or it is this defect wearing a feature's name.