Irregular visuals are often hit-tested as bounding rectangles

What it is

Stars, arrows, speech bubbles, italic letters—irregular outlines—are often not hit-tested against their true path. An axis-aligned bounding rectangle (AABB) stands in. The empty corners of a star and the air beside an arrow shaft become clickable. Rectangle-for-shape is an approximation whose saving is the cost of per-frame point-in-polygon or bitmap-alpha tests.

Why it happens

Toolkit hit traversal walks root to leaf; each node first coarse-tests its bounds, then descends. Many leaves stop there and never do a pixel test, so the coarse rectangle is the final hot zone. A rotated triangle’s AABB is more than half transparent; a long-tailed arrow’s box sticks out to one side. Graphics that look staggered still share a large rectangle on the input side. The Web’s default click region follows the layout box; SVG paths often fall back to the bounding box unless pointer-events is set. Bitmap buttons that hit only non-transparent pixels hug the shape better, but antialiased fringes make that hug jagged and unstable.

Studying it

Take a set of irregular icons (star, arrow, bubble, italic glyph) and compare three hits: AABB, convex hull, alpha threshold. People tap tips, notches, and neighboring empty glass in a natural posture. Independent variables are simplification strategy, rotation angle, and the alpha cutoff of the antialiased edge. Dependent measures are fire-on-transparent fraction, miss-on-opaque fraction, and per-frame hit-test cost. Sweep rotation: at 0° the rectangle still fits reasonably; at 45° wasted area peaks.

Where it stops holding

Large, sparse ornaments are almost harmless with an AABB; people tap the middle anyway. Thin polylines on a map, or strokes in a drawing tool, produce boxes that cover half the canvas and need a path or an acceleration structure. A fully stuffed round-rect button differs from its AABB by a few pixels; both the gain and the cost of simplification are negligible. Expanding that AABB further to a minimum size is a different move; this leaf is only the rectangle standing in for an irregular outline.

Applying it

• For concave, rotated, or long-handled graphics, do not accept the layout box by default; at least paint the AABB in a debug layer and look at how much transparency it contains.
• When the hit must hug the shape, use a convex hull or a modestly dilated alpha mask, and freeze the antialias threshold so the same button does not fire from its fringe on one tap and miss on the next.
• Use two-stage hitting in lists and canvases: AABB cull, then a precise test on the candidates—do not stop at the leaf to save a few cycles.

Related

• Same group: C2.20.1 Hit regions need not match the visual shape of a control · C2.20.3 Bounding-box simplification can make neighboring irregular targets overlap · C2.20.4 Hit shapes should follow where fingers actually land
• Nearby: C2.14 Separating touch targets from visual boundaries · C2.04 Fat-finger problem
• Search terms: AABB · bounding box · irregular hit testing