Fabric.js: Touch events not working on Chrome

[nitaskenderi]

Version

2.4.2

Test Case

http://fabricjs.com/freedrawing
http://fabricjs.com/touch-events

Information about environment

Google Chrome Version 70.0.3538.77 (Official Build) (64-bit)
Windows 10 Pro

Steps to reproduce

Try to draw or move an object by touching the screen of a touchscreen laptop.

Expected Behavior

Lines should be drawn successfully/Object should be moved successfully. Touch events should work.

Actual Behavior

No lines are drawn/Object doesn't move. Touch events are not working.

Additional Information

I think this is to do with the new version of Chrome that just came out, since the touch events still work on Firefox.

[labinotkrasniqi]

Yes this happened to me to, tried in Mozilla it worked just fine.

[Tsunami2069]

Weird, on my chrome (also v70) the touch events and line drawing work just fine.

[nitaskenderi]

@Tsunami2069 do you have the exact version 70.0.3538.77 or maybe a slightly older one?

[Tsunami2069]

No, I have that exact version...

[Tsunami2069]

Aren't the examples always using the most current version, which now is 2.4.3???
Maybe that is fixed now.

[asturur]

i did not do anything related to touch.
There is an open PR that talks about changing a default value for isTouchSupported to which i made some questions but i did not get answers.

To be honest the real solution would be implement the pointerEvents completely

[nitaskenderi]

@Tsunami2069 I am basing my assumptions on the fact that the demos fabric.js has on their own website are not working, but I will try updating the version of my library, thanks.

@asturur I am not quite sure if I understand, is there something I must change then in order for the touch events to work again?

[asturur]

No i think something changed in chrome 70 and broke our already fragile touch system

[asturur]

https://github.com/fabricjs/fabric.js/pull/5338
this is the PR i was referring to

[nitaskenderi]

@asturur I understood your comment now, thanks for the quick reply. Could this bug be prioritised since Chrome is a very popular browser, or when could we expect that a solution can be implemented?

[asturur]

if i had time and will i would.
I m really busy.
The solution is very easy, someone with a touch device that can use most of the browsers should check a compatible way to detect when touch is supported or not. At that point we should check if that fixes the problem we have now.

The linked PR and the comments below with linked articles on how to detect touch should be enough to make a test or two.

Implmenenting the pointer api completely would be better anyway, i understand is a bigger effort.

[nitaskenderi]

@asturur fair enough, I will try to help when I also have some free time since I own a touch device. Thank you for your help!

[adriangraham]

I'm also seeing this on a Chromebook (70.0.3538.76) with a touch screen. I confirmed that fabric.isTouchSupported was false. I then tried manually setting fabric.isTouchSupported to true. The touch events still did not register in the free drawing example that I'm using to test (which worked on a previous version of Chrome). If there are other things I can test and report back on, please let me know. Thanks!

[tatsuyafw]

Hi. A few days ago, I also faced this issue with a touch monitor, and filed the issue to the chromium project.

• 898045 - Free drawing using a touch monitor shows nothing with fabric.js. - chromium - Monorail

And then, I found that ontouch* APIs are default to disabled on desktop (Chrome 70).

• The ontouch* APIs default to disabled on desktop - Chrome Platform Status

I will try to fix this issue if I have time.
BTW, I think the followings will be workaround.

1. Open chrome://flags/#touch-events .
2. Change Touch Events API from Disabled to Automatic.

[asturur]

is a bug or a feature?

The good thing of moving only of major versions, is that each release you can break any behaviour.

[tatsuyafw]

I think the change seems to be intended.
In https://bugs.chromium.org/p/chromium/issues/detail?id=897906#c4 ,

Yes, this is intended.
See: https://www.chromestatus.com/feature/4764225348042752

(note that we only disabled ontouch*, but touchs are still function, you can still use touch events via addEventListener)

[asturur]

ok it says what we say.
Move to pointer events.
I wish i had time or will or someone interested in doing it that i have just to follow and guide in the PR.

[gavrochelegnou]

I think the issue lies only in the detection of touch devices :

fabric.isTouchSupported = 'ontouchstart' in fabric.window;

That should be change to something like :

fabric.isTouchSupported = 'maxTouchPoints' in navigator;

as stated here : https://www.chromestatus.com/feature/4764225348042752

There are some occurences of ontouchstart in lib/events.js but i don't know whether or not this lib is still in use ?

[mheinsen]

There are some occurences of ontouchstart in lib/events.js but i don't know whether or not this lib is still in use ?

I think that this lib is still used. If so, lib/events.js lines 359-361 contain the test for touch detection (by checking for ontouchstart, via the getEventSupport method) which needs to be updated.

[kumaresan-subramani]

HI @asturur , Thanks dude.

Your MR saves me in different situation