Signature_pad: Drawing is broken on iOS 13 devices

Created on 24 Sep 2019 · 3Comments · Source: szimek/signature_pad

The drawing is broken on iOS 13 devices.

I can draw straight horizontal lines but if I try to draw vertical lines it draws only a point and the page scrolls up and down instead of drawing.

I verifified with XCodes iOS Simulator that it worked on iOS 12 devices.

The bug can be also reproduced with the official signature_pad demo http://szimek.github.io/signature_pad/

A quote from Safari 13's release notes:

Added support for one-finger accelerated scrolling to all frames and overflow:scroll}}elements eliminating the need to {{set-webkit-overflow-scrolling: touch.

Changed the default behavior on iPad for wide web pages with responsive meta-tags that require horizontal scrolling. Pages are scaled to prevent horizontal scrolling and any text is resized to preserve legibility.

https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

Could this be the cause of this bug?

Source

derUli

Most helpful comment

it is also fixed in iOS 13.1

victor-perez on 25 Sep 2019

👍3

All 3 comments

The easiest way to fix this is by adding a wrapper with ontouchmove="return false"

<div ontouchmove="return false">
    <canvas id="signature" />
</div>

victor-perez on 24 Sep 2019

it is also fixed in iOS 13.1

victor-perez on 25 Sep 2019

👍3

I had to attach the onTouchMove event handler to the root container div of our react app.
It doesn't work if I just wrap the canvas in a div with that event handler.
However this disables scrolling on touch devices completely.
So i had to dynamically attach and detach the ontouchmove event when the user clicks on the canvas.

derUli on 27 Sep 2019

Was this page helpful?

0 / 5 - 0 ratings