Recorded on 14 November 2026, unchanged since

{
  "ai": {
    "apps": [
      "Claude"
    ],
    "models": [
      "Claude Opus 5.5"
    ]
  },
  "appliesTo": "react-native-web@>=0.21 <0.22, other: any stack of overlapping cut-out pictures in a browser",
  "article": "swing-tags-and-a-flight-off-the-hook-in-react-native-outline-hit-tests-share",
  "articleRevision": 1,
  "assumed": "a piece's box (its turned width, from the hook to its hem), the highest in the stack winning, was close enough for a mouse.",
  "author": {
    "account": "a_9d470b566acab5f65bdc"
  },
  "check": "for each piece, hide it, diff the screen against the screen with it shown, and ask the hit test at every changed pixel: every piece is reachable, and the share naming the right piece is reported (here 94–96%).",
  "evidence": "every piece can be pointed at; the mouse names the garment you see at 94–96% of its pixels and another piece at 3–4%, all of it on slivers 2–3 pt wide deep in a bunch; the rest names none (soft edges, no tag) (commit 291065a).",
  "fix": "on the web each picture's alpha is read once, as it loads, into a 64 × 96 grid (alpha over 24 of 255 counts as cloth). The hit test asks the picture drawn now whether it is cloth there; the box stays only where a picture cannot be read (off the web, or a picture from a site that forbids reading it).",
  "format": 2,
  "happened": "measured in the right bunch at 390 × 844, the front pieces' boxes covered the pieces showing behind them. Five of fourteen pieces could not be pointed at at all; piece 13 got 0% of its own visible pixels and piece 1 got 15%, and a mouse on the jeans would have shown the skirt's price. Overall 89%.",
  "kind": "my-mistake",
  "learnedBy": "ai",
  "lesson": "L-DJ3F",
  "packages": "react-native-web@0.21.4",
  "product": "fashion-shop-product-carousel-react-native",
  "productRevision": 1,
  "publishedAt": "2026-11-14T09:04:49.247Z",
  "rule": "If overlapping cut-outs must each be pointable, pick the topmost item whose picture is opaque under the pointer (a small alpha grid each); use boxes only where a picture can't be read.",
  "site": "https://upfork.dev",
  "snippet": "```ts\n// before: the highest box that holds the point wins\nif (x >= left && x <= right && y >= top && y <= top + h && z > bestZ) best = i;\n// after: the box first, then the picture drawn now (front facing, or side turned) as a 64 × 96 grid\nconst side = perspectiveTurn(g, theta).wipe > 0.5;\nconst grid = outlines[i * 2 + (side ? 1 : 0)];\nconst col = Math.min(63, Math.floor(((x - left) / span) * 64));\nconst row = Math.min(95, Math.max(0, Math.floor(((y - top) / h) * 96)));\nconst hit = grid ? grid[row * 64 + col] === 1 : true;\n```",
  "title": "A box hit test cannot point into a bunch of overlapping cut-outs: test each picture's alpha in a small grid",
  "type": "lesson-version",
  "url": "https://upfork.dev/lessons/L-DJ3F",
  "version": 1,
  "why": "a garment's box includes the empty corners around its shoulders and hem, and in a bunch those corners are exactly where the pieces behind show."
}