fix: init signature pad after CSS transition reveals canvas #28

Merged

forgejo_admin merged 2 commits from 4-fix-signature-pad-init-on-agree into main

2026-03-27 22:00:39 +00:00

forgejo_admin commented

2026-03-27 21:58:09 +00:00

Owner

Summary

Signature pad initialized on mount when the canvas had 0 dimensions (hidden behind the "I agree" checkbox CSS toggle)
Drawing did not register until a window resize re-initialized the pad
Now the pad initializes after the CSS reveal transition completes, using a $effect + transitionend listener

Changes

src/routes/contract/[token]/+page.svelte: Removed premature setTimeout(initSignaturePad, 100) from onMount. Added $effect that watches agreed state and listens for transitionend on the signature-area div before calling initSignaturePad(). Added 450ms fallback timeout for reduced-motion. Guarded resize handler to only re-init when pad is visible.

Test Plan

Tests pass locally (14/14 vitest pass)
Manual verification: check "I agree" checkbox, signature pad immediately accepts drawing (no resize needed)
Works on mobile touch and desktop mouse
Uncheck/re-check agree box -- pad re-initializes each time
Resize browser while pad visible -- pad re-initializes correctly

Review Checklist

Passed automated review-fix loop
No secrets committed
No unnecessary file changes
Commit messages are descriptive

Closes #4
project-westside-basketball -- the project this work belongs to

## Summary - Signature pad initialized on mount when the canvas had 0 dimensions (hidden behind the "I agree" checkbox CSS toggle) - Drawing did not register until a window resize re-initialized the pad - Now the pad initializes after the CSS reveal transition completes, using a `$effect` + `transitionend` listener ## Changes - `src/routes/contract/[token]/+page.svelte`: Removed premature `setTimeout(initSignaturePad, 100)` from `onMount`. Added `$effect` that watches `agreed` state and listens for `transitionend` on the signature-area div before calling `initSignaturePad()`. Added 450ms fallback timeout for reduced-motion. Guarded resize handler to only re-init when pad is visible. ## Test Plan - [ ] Tests pass locally (14/14 vitest pass) - [ ] Manual verification: check "I agree" checkbox, signature pad immediately accepts drawing (no resize needed) - [ ] Works on mobile touch and desktop mouse - [ ] Uncheck/re-check agree box -- pad re-initializes each time - [ ] Resize browser while pad visible -- pad re-initializes correctly ## Review Checklist - [ ] Passed automated review-fix loop - [ ] No secrets committed - [ ] No unnecessary file changes - [ ] Commit messages are descriptive ## Related Notes - Closes #4 - `project-westside-basketball` -- the project this work belongs to

forgejo_admin added 1 commit

2026-03-27 21:58:09 +00:00

fix: init signature pad after CSS transition reveals canvas 3f48e384a2

The signature pad was initialized on mount when the canvas had 0
dimensions (hidden behind the agree checkbox CSS toggle). Now uses a
$effect that listens for the transitionend event on the signature area,
ensuring the canvas has its final layout dimensions before SignaturePad
reads them. Includes a 450ms fallback timeout for reduced-motion or
edge cases where transitionend does not fire.

Closes #4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin added 1 commit

2026-03-27 21:59:54 +00:00

fix: guard against double initSignaturePad call 72550b53ae

Add initialized flag so transitionend and fallback timeout are mutually
exclusive -- whichever fires first initializes the pad and cancels the
other.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-03-27 22:00:14 +00:00

Author

Owner

QA Review -- PR #28

What was reviewed

Single-file Svelte bugfix: src/routes/contract/[token]/+page.svelte (33+12 additions, 4+8 deletions across 2 commits).

Findings

Issue found and fixed (commit 72550b5): The transitionend handler and the 450ms fallback timeout could both fire, calling initSignaturePad() twice. Added an initialized flag so whichever fires first initializes the pad and cancels the other. The init function is idempotent so this was not a functional bug, but it was unnecessary work and a code quality issue.

Correctness:

Root cause correctly identified: initSignaturePad() ran on mount when canvas had 0 dimensions (hidden by CSS toggle)
Fix correctly uses $effect to watch agreed state + transitionend event on the signature-area div
max-height is the correct property to wait for (400ms, the longest CSS transition, controls container dimensions)
450ms fallback handles reduced-motion and edge cases
Cleanup function properly removes listener and clears timeout
Resize handler correctly guarded with if (agreed)

SOP compliance:

Single file changed, directly addresses issue #4
Closes #4 in PR body for auto-close
No secrets, no unnecessary changes
Tests pass (12/12 vitest)

VERDICT: APPROVE

## QA Review -- PR #28 ### What was reviewed Single-file Svelte bugfix: `src/routes/contract/[token]/+page.svelte` (33+12 additions, 4+8 deletions across 2 commits). ### Findings **Issue found and fixed (commit 72550b5):** The `transitionend` handler and the 450ms fallback timeout could both fire, calling `initSignaturePad()` twice. Added an `initialized` flag so whichever fires first initializes the pad and cancels the other. The init function is idempotent so this was not a functional bug, but it was unnecessary work and a code quality issue. **Correctness:** - Root cause correctly identified: `initSignaturePad()` ran on mount when canvas had 0 dimensions (hidden by CSS toggle) - Fix correctly uses `$effect` to watch `agreed` state + `transitionend` event on the signature-area div - `max-height` is the correct property to wait for (400ms, the longest CSS transition, controls container dimensions) - 450ms fallback handles reduced-motion and edge cases - Cleanup function properly removes listener and clears timeout - Resize handler correctly guarded with `if (agreed)` **SOP compliance:** - Single file changed, directly addresses issue #4 - `Closes #4` in PR body for auto-close - No secrets, no unnecessary changes - Tests pass (12/12 vitest) ### VERDICT: APPROVE