From 4329f757f5b42e89c6759bbabadd9763ad9d1c16 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Mon, 27 Jul 2026 18:13:03 -0700 Subject: [PATCH] Only the visible card face is interactive A hidden backface still hit-tests in Chrome, so after flipping a card the front's picture-in-picture sat invisibly over the back's chips, showing its zoom cursor and eating the flip-back click. Pointer events now follow visibility: the back is inert until the card flips, and the front goes inert while it is flipped. Co-Authored-By: Claude Fable 5 --- skill/scripts/serve-question.mjs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/skill/scripts/serve-question.mjs b/skill/scripts/serve-question.mjs index de5f1e52f..7925cd2e4 100644 --- a/skill/scripts/serve-question.mjs +++ b/skill/scripts/serve-question.mjs @@ -476,6 +476,12 @@ function page() { .face { background: var(--ks-lacquer-raised); border: 1px solid var(--ks-rule); border-radius: 10px; box-shadow: 0 18px 40px oklch(0% 0 0 / 0.35); overflow: hidden; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .face.front { position: relative; height: 100%; } .face.back { position: absolute; inset: 0; transform: rotateY(180deg); } + /* Only the visible face is interactive: a hidden backface still hit-tests + in Chrome, so the front's pip would otherwise sit invisibly over the + back's chips, showing its zoom cursor and eating the flip-back click. */ + .face.back { pointer-events: none; } + .card.flipped .face.back { pointer-events: auto; } + .card.flipped .face.front { pointer-events: none; } .face.lead { border-color: var(--ks-kinpaku); box-shadow: 0 0 0 1px var(--ks-kinpaku), 0 18px 40px oklch(0% 0 0 / 0.45); } .card:hover .face { border-color: var(--ks-kinpaku-deep); } .card:hover .face.lead { border-color: var(--ks-kinpaku); }