Flashcard flip: paint one face explicitly, never rely on backface-visibility
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:
parent
9cea13496a
commit
396da6528a
5 changed files with 82 additions and 6 deletions
|
|
@ -70,12 +70,19 @@ export function ActivityHeader({
|
|||
export function PromptCard({
|
||||
children,
|
||||
className,
|
||||
style,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("glass-panel glass-solid rounded-[1.5rem] px-5 py-6 text-balance sm:px-6", className)}>{children}</div>
|
||||
<div
|
||||
className={cn("glass-panel glass-solid rounded-[1.5rem] px-5 py-6 text-balance sm:px-6", className)}
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue