dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Flashcard flip: paint one face explicitly, never rely on backface-visibility

Browse source 
On a GPU-composited desktop the flipped card showed the question mirrored
over the answer. Both faces are glass layers with backdrop-filter, and on
some compositing paths the front's backface keeps rendering, so the
pre-rotated back face and the mirrored front face both painted.

- The faces are now painted by an explicit visibility swap driven by the
  animation's own rotation (onUpdate): the swap lands at the 90° edge-on
  moment, where it cannot be seen, so exactly one face is ever in the
  render tree — independent of backface-visibility and of the browser's
  3D flattening rules. onAnimationComplete lands the swap for instant
  flips (reduced motion now skips the spring, matching the app's motion
  rules).
- PromptCard takes an optional style so the face can carry the visibility.
- phase-2 suite: the painted-face invariant at rest, flipped and flipped
  back, plus the answer reading inside the card (56 checks).
- README: decision 53. SW -> freezmo-v39.
This commit is contained in:
Martin Dvořák 2026-10-12 07:34:38 +00:00
commit 396da6528a
5 changed files with 82 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

9
README.md
View file

@ -1355,6 +1355,15 @@ Things I chose while building, with the reasoning:
phase-1 suite (43 checks, including the real route mapping against a stub Ollama returning a
monthly-limit body, a two-device sync round-trip, and the generation guards below).
53. **The flashcard flip never relies on `backface-visibility`.** The card is two faces in a
`preserve-3d` container (the back pre-rotated 180°) — the classic CSS flip — but each face is a
glass layer with `backdrop-filter`, and on some GPU/compositing paths the front's backface keeps
rendering, so the flipped card showed the question mirrored over the answer. The faces are now
painted by an explicit `visibility` swap driven by the animation's own rotation (the swap lands
at the 90° edge-on moment, where it cannot be seen), so exactly one face is ever in the render
tree. Reduced motion skips the spring and the swap still lands via `onAnimationComplete`. The
phase-2 suite asserts the painted-face invariant at rest, flipped and flipped back.
52. **Reporting a question is local-first, with a server copy for the operator.** The red "!" in
the feed chrome records the question in this browser — that local list is the skip state, so the
card leaves study, review, mistakes and exam sessions, and Undo in the toast brings it back