F1.08.2broken overlay anchordesign

When the anchor breaks, the object of the action cannot be judged

Aliases: orphaned popover · dangling caret · unowned overlay

What it is

A comment field grows from a post’s Reply. A casual scroll sends that post out of the viewport; the field stays pinned to its old screen coordinates, the arrow pointing at empty pixels. Who receives the next typed sentence no longer has a geometric answer. A broken overlay anchor is a layer that remains after its source has left or mutated — the pointing relation has become a null pointer.

A keyboard shoving the viewport, a filter reshuffling the list, a live refresh replacing the card that held the trigger, all manufacture this null. People can still read the fields in the layer. They cannot bind those fields back to an object.

Why it happens

Anchoring is a geometric constraint between layer and object: the arrow hits the source, the layer follows the source’s screen rectangle. When one end of the constraint vanishes (the source scrolled out, unmounted, sized to zero), the other end does not invent a new object. It sits at stale coordinates. Stale coordinates often happen to sit near the next card or the next field, and a mis-bind appears — the comment posts to the story below.

Scrolling is the most common break, because scrolling is a change of the source’s screen rectangle, and many layers are position: fixed on purpose so they will not be clipped. The fix was “don’t get clipped”; the cost is decoupling from the source.

Where it stops holding

A modal dialog was never tied to a row-level object; scrolling the list underneath is not a broken anchor. A source still in view that only nudges slightly, with the layer nudging with it, is the constraint being maintained, not broken. A map bubble that follows a pin should close or become a list row when the pin is scaled off-screen, not drift over empty map. Screen-reader users do not depend on the arrow; breakage for them is focus still in the layer while context is already another row — keep the bind with a live object name (“Reply to so-and-so”), not with position.

Applying it

  • When the source scrolls out, unmounts or is replaced, close the layer, or let the layer scroll with the source and close when the source is gone. Do not pin the layer to screen coordinates.
  • After a keyboard shove or a window resize, recompute which control the arrow hits; if it hits no trigger, close.
  • Submission layers should write the object name into the title (“Reply to 《title》”), so a momentary geometric drift still has a semantic bind.
  • How to check: open the layer, then scroll, raise the keyboard, change a filter, and see whether the arrow still hits the original control. Pointing at empty pixels or at a neighbour is a bind already broken.

Related

  • Same group: F1.08.1 An overlay must point at the control that opened it · F1.08.3 At the screen edge, flip rather than clip
  • Nearby: F1.09 Overlay occlusion of the object · F1.10 Viewport compression after the keyboard
  • Search terms: broken overlay anchor · orphaned popover · scroll dismissal

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F1.08.2