[BUG] Free drawing on IOS disables page scrolling

[guari]

Test Case

http://fabricjs.com/freedrawing

Steps to reproduce

Start to draw something with a touch

Expected Behavior

You should be able to scroll the page when swiping an area that is not the canvas one

Actual Behavior

Scroll is 'locked' and there seem to be no way to unlock again (like eg. an evt.preventDefault() is called on document touchmove when should not).

This happens only on IOS Safari, tested on affected devices: iPhone 6S IOS 9, iPhone 6 IOS 8, iPhone 5 IOS 6, iPad Air IOS 8.3; instead on Android with Chrome everything run perfectly). The bug starts when the canvas is touched and something is drawn, until nothing is drawn on the canvas, the bug does not appear.
Toggling isDrawingMode true/false does not solve the issue because scrolling remains locked.

[guari]

Here is a small fiddle if needed: https://jsfiddle.net/u0k02u9f/
(the same happens on http://fabricjs.com/freedrawing)

This issue breaks the scroll functionality of nearly any web-app/web-page on IOS Safari that uses fabric.js to draw on the canvas.
If everything is set up correctly and there are no workarounds, I can try to debug the library code.

[asturur]

i guess the problem is the window events attached by fabric.

ios safari is not on my list of devices sadly, i can just guess

[guari]

@asturur thanks for quick reply!
to be honest me too :), I tested all on android and it worked flawlessly, but I got reports by ios users.
I've got a chance to replicate and debug the issue with browserstack, I'll check fabric listeners and report here if I'll find something useful to track the issue.

[asturur]

please have a look at the file in the mixin folder called canvas-events

[ncou]

If my memory is good on iOS you set a preventDefault on the touchmove event on the body to prevent the elastic scroll from the safari navigator.

in fabric.js there is a listener added on the "document" for the "touchmove" event to call the function "_onMouseMove()" who call the preventDefault if "allowTouchScrolling = false".

It's perhaps the source of your problems (PS : this parameter is set to false by default).

I don't have an ipad, so it's just a guess. Try this fiddle to see if it's better.
https://jsfiddle.net/u0k02u9f/3/

[guari]

back to this topic, you hit the issue!
I got it working with a little workaround on IOS, here there is the updated fiddle that works:
https://jsfiddle.net/u0k02u9f/4/

Setting allowTouchScrolling = true restored the scrolling, then the page was scrolling also when drawing on IOS, so the key points to get the right behavior are:

CSS:

• set position: fixed; and overflow: hidden; for html and body to get rid of elastic scroll;
• restore the scroll into a wrapper layer, but take care to use -webkit-overflow-scrolling: auto (and not touch on the scroll layer that contains the canvas, otherwise scroll results again locked);

JS:

• set allowTouchScrolling = true on fabric.js;
• prevent default on canvas container:

$('.canvas-container').on('touchmove', function(evt){
        evt.preventDefault();
    });

thanks @asturur and @ncou for support :)

[Kienz]

@guari I can't reproduce it on iOS Safari 10.2. I can scroll the page after the canvas is touched. Everything looks good to me. Can you record a small video of your issue.
I think you should update to latest iOS version. Will check it on Monday with iPad and iOS 9. This is the oldest iOS version on any of my devices.

[guari]

@Kienz I uploaded here a video: https://vid.me/82mJ
sorry for compression, it isn't great, but it should be enough to see the issues reported in the previous messages:

• http://fabricjs.com/freedrawing and https://jsfiddle.net/u0k02u9f/: scroll doesn't work after first touch on the canvas;
• https://jsfiddle.net/u0k02u9f/3/: scroll is working but page is scrolling also during drawing on touchmove;
• https://jsfiddle.net/u0k02u9f/4/: everything works correctly;

the video is recorded on an iPhone 6 IOS 8, yesterday I noticed the same behavior on iPhone 6S IOS 9, I haven't tested on more recent iPhone versions for now, but it's likely that Apple finally started to fix some of all those browser quirks introduced with older Safari versions... :)

(jsfiddles uses the latest version of fabric.js on github by rawgit)

[asturur]

to be handled in #3869