skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Only the visible card face is interactive

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-07-27 18:13:04 -07:00
co-authored by Claude Fable 5
parent 69bf1e9523
commit 4329f757f5
1 changed files with 6 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skill/scripts/serve-question.mjs
+6
View File
@@ -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); }