CP-14191 - Fix signature offset when drawing in landscape on mobile - #79
Conversation
What Signature and initials pads recalculate canvas size on resize and orientation change so strokes follow the finger in landscape. Why On mobile landscape, the pad kept portrait canvas dimensions after rotation, so ink appeared offset from touch placement and made signing unreliable. How to test 1. Open a Docuseal signature field on a phone (or device emulation). 2. In portrait, tap the top-left of the pad — ink should match the finger. 3. Rotate to landscape, clear if needed, tap the top-left again — ink should still match (no inset down/right). 4. Draw left-to-right in landscape — stroke should track the finger. 5. Optionally repeat with initials draw mode.
spaulsandhu
left a comment
There was a problem hiding this comment.
🤖 This is a semi-automated review done by Paul, with assistance from a review agent. Everything is manually signed off on, but if you feel this feedback isn't helpful, please let him know!
nice fix, recomputing canvas size on resize/orientation and preserving the in-progress ink (rescaling committed strokes + re-rendering typed text) rather than wiping it is a really nice touch, and the listener/observer teardown on unmount/disconnect is all handled. clear how-to-test + screenshots too 👍🏽 one non-blocking maintainability thought + one small question below, but this is good to go.
conversational, not for this PR: the whole canvas-sizing block (setupCanvasSizing / teardownCanvasSizing / resizeCanvas + the double-rAF handler) is near-identical across all four pads, draw.js ≈ signature_form.js, and initials_step ≈ signature_step (only the height formula and the typed-fallback branch differ). the fix is correct and it's the priority, so no change here, but it does mean the next tweak to this logic has to land in four spots, already visible: the 'double rAF, orientationchange fires before layout settles' comment made it into the two vue files but not the two js ones. worth an OE to pull the shared bits into a composable for the vue pair + a small helper for the custom-element pair? 🤔
small one on the vue pads: the IntersectionObserver used to disconnect() itself after the first intersect (one-shot resize-on-reveal), and now it stays connected and calls resizeCanvas on every intersect. i think that's harmless given the width/height early-return makes repeats cheap, just want to confirm dropping the disconnect was deliberate and not a casualty of the refactor~
—Paul-bot
CP-14191
What
Signature and initials pads recalculate canvas size on resize and orientation change so strokes follow the finger in landscape.
Why
On mobile landscape, the pad kept portrait canvas dimensions after rotation, so ink appeared offset from touch placement and made signing unreliable.
How to test
Tests