At the screen edge, flip rather than clip
Aliases: collision flipping · menu clipping · overlay flip
What it is
A tab-bar button has too little room above it for the full menu; the lower half is clipped by the viewport, and a last item such as Sign out is both unseen and unhittable. The repair is to flip the whole layer above the button, turn the arrow with it, and keep every item. Flip not clip is what to do when a layer collides with the viewport: keep the complete set of choices, not the default “opens downward” direction.
Scrolling inside the menu is a fallback when even a flip will not fit. It should not be the first choice — scrolling is an admission that some targets are invisible by default.
Why it happens
The default direction (below the button, to the right of a field) is a preference, not a law of physics. The viewport is a hard wall. Clipping drives both the visible height and the hit height of some targets to zero; Fitts’s $W$ for those items becomes 0 and they leave the choice set. Flipping re-places the whole layer on an axis that still has room; the cardinality of the set is unchanged, and a caret in the new direction keeps the anchor.
Only when all four directions fail should the layer shrink or scroll internally. Clip first, and people will take the remaining items as the whole set — the clipped commands treated as nonexistent.
Where it stops holding
A watch face or a picture-in-picture window that cannot fit a complete layer in any direction cannot flip; it has to scroll inside or jump to a fullscreen page. Layers whose direction is the meaning (a cascade where “opens down” means “into a child”) have to restyle the caret and the indent after a flip, or the flip will be read as going up a level. Motion that starts downward and then jumps up still shows a clipped frame in between, which looks like a shorter list; compute the layout before the entrance plays. From a screen reader, clipped-but-still-in-the-accessibility-tree items give visual users and assistive-tech users two different sets — either both can reach them, or neither.
Applying it
- Before opening, collision-detect against remaining viewport space. If the default direction does not fit, flip to the opposite side and reverse the caret.
- After a flip, every item’s hit target must still be fully exposed. If even that fails, then allow internal scroll, with a visible scroll cue.
- Near left/right edges prefer a horizontal flip; near the bottom prefer a vertical flip. Do not clip diagonally into a missing-corner rectangle.
- How to check: park the trigger on each of the four edges and four corners, open the layer, and look for any item cut by the viewport, unseen and unhittable. One clipped item means that direction is still clipping.