Chrome update makes fabric default to touch

[nickyout]

After a reload of Chrome today, items on the canvas suddenly became unselectable.

The cause was (likely) that the latest Chrome update (it says 25.0.1364.97 m) causes isTouchSupported to become true - and thus fabric would pick touchstart and touchmove instead of mousedown and mousemove. After manually setting it to false, everything seemed to work again.

I'm not sure if this is a bug, but it sure doesn't seem like desired behavior to me.

[kangax]

Hm, on my "27.0.1423.0 dev" fabric.isTouchSupported is false. I checked in http://fabricjs.com/kitchensink/ which uses Fabric 1.0.12

[kangax]

Maybe related:

https://twitter.com/RelativeEdge/status/306217790442991616
https://twitter.com/RelativeEdge/status/306218397459423232

[nickyout]

Indeed, it was related. Before changing the flags in chrome, the kitchensink did not work. Now it works again.

I've found a comment on the chrome release page about this:
http://googlechromereleases.blogspot.nl/2013/02/stable-channel-update_21.html?showComment=1361890257539#c5993761582565002405

You may want to keep track of this. Perhaps the default will be reverted again.

[paulirish]

nickyout is on chrome stable.

Do you have a cintiq/wacom plugged into your machine? Chrome seems to think you have a touchscreen available.

[paulirish]

If you can file a ticket if this is indeed a bug. that'd be great... crbug.com/new

[nickyout]

Indeed, a bamboo tablet was connected. However, after pulling the device out and reverting the flags, fabric was still not working in Chrome, while working in all other browsers.

I'm not going to file a bug report. I don't even think it's a bug, but a conscious decision of the Chrome development team. I just thought you should know.

[kangax]

@nickyout Which Fabric version are you using? There was a change in recent builds to only use touch-based handler or mouse-based one, in case both are firing.

[lucacanella]

Experiencing same problems. I have a Bamboo tablet connected and getting same behaviour using fabric 0.9.15.

[kangax]

Please try with latest 1.0.12

On Thu, Feb 28, 2013 at 4:45 PM, lucacanella notifications@github.comwrote:

Experiencing same problems. I have a Bamboo tablet connected and getting
same behaviour using fabric 0.9.15.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/450#issuecomment-14239526
.

[lucacanella]

Tried with 1.0.12, same problems. Only fix is changing Chrome flags (should this be considered a Chrome issue?).
At first using 1.0.12 instead of 0.9 seemed to change the order of the objects rendered in groups but no other effect on interaction.

[kangax]

@lucacanella So 1.0.12 works without bamboo connected but doesn't work with bamboo connected?

[kangax]

Perhaps related to our pointer detection, where if touch support is detected, we're getting event.touches[0].pageX/Y. Not sure if that works in Chrome, when it's in "touch mode".

[lucacanella]

@kangax there's no difference, maybe Chrome looks for the drivers? I just made it work disabling manually two "touch related" flags from chrome://flags/

[kangax]

It'd be great if you could check if event[0].touches.pageX/pageY are
present and report correct coordinates. Either that or "touchstart",
"touchmove", "touchend" are not working correctly.

kangax

On Fri, Mar 1, 2013 at 12:16 AM, lucacanella notifications@github.comwrote:

@kangax https://github.com/kangax there's no difference, maybe Chrome
looks for the drivers? I just made it work disabling manually two "touch
related" flags from chrome://flags/

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/450#issuecomment-14263880
.

[kangax]

I think I see what's going on. After enabling touch events, "ontouchstart" in document is true but touch events never fire :( I'm using trackpad on my Macbook Pro / Chrome 27 dev.

Here's jsfiddle reproducing this

/cc @paulirish should I file a bug or am I missing something?

[paulirish]

@kangax enabling them in devtools settings? if they never fire then that's a problem yes. File it!

[barkinet]

hi my chromium is not well

[barkinet]

Chrome Beta 26 Update

[nickyout]

@kangax I tried the kitchensink in Chrome and my mouse did not provide input. It seems the same as what lucacanella is reporting. The responsible chrome flag is simply 'Enable touch events' or w/e it literally is in english, toggling between Automatic and Disabled.

I tried break points towards that 'touches' function and it never fired. I added a console.log in __onMouseDown and it seems it fires in IE/FF and not in Chrome. There is a touch mode on my Bamboo tablet, but not even that gives a response. Tried this in 0.8.32 btw (not minified), though 0.8.32, 0.9.15 and 1.0.12 seem to responds all the same in this case.

I'd guess (if it's not conclusive already) that in Chrome, while touch is 'enabled', the touch events are not firing instead of mouse events, and thus there is no input.

edit: Oh, I see you drew the same conclusion. I could have read the comments after kangax asked about checking the event a little better...

[SamMaxwell]

I am playing with the demos on http://fabricjs.com/customization on a desktop Windows 7 PC that has a two monitors: on of which is a touch monitor. In Chrome, I cannot use the mouse at all to interact with the canvas objects on either monitor. I can use my finger successfully on the touch monitor. I think you want users to be able to use mouse or touch simultaneously. Paper.js works this way.

[kangax]

I need to file this as a Chrome issue. Meanwhile, we can fix this by observing both touch and mouse events, then checking whichever fires first and disabling the other one.

[Drakuwa]

Can we expect a solution any time soon? Or, can we disable touch support by default? I've tried fabric.isTouchSupported = false; after initializing the canvas object, and it still doesn't work (on Google Chrome 25.0.1364.97 m). You can not select or manipulate Image objects on the canvas.

[kangax]

You need to disable it before initializing canvas. Otherwise it's too late; incorrect event listeners have already been attached.

I haven't had much time lately. Will get to this as soon as possible. Patch welcome, as always.

[kangax]

I think this issue no longer happens now that Chrome is stable at 27.

[Manoj-Roy]

How to support canvas in mobile devices by using this fabric.js library.
It was not working when I checking by chrome mobile developer option, Can you help me.

[asturur]

build fabricjs with gesture module, it should work with gestures. with chrome emulator i m not able to make multitouch events go

[Manoj-Roy]

please give a demo site for help. Because it does not working.

[handersen]

Have you tried http://fabricjs.com/touch-events/ ?

[Manoj-Roy]

I have also trying this but it does not working in google chrome mobile device emulator you can check it.

[asturur]

as i wrote before, i m not able to make chrome emulator work with event.js.

refer to chrome help center.

[Manoj-Roy]

Without checking in chrome emulator should it run in mobile devices ?

[asturur]

yes it does

[Manoj-Roy]

Thanks! mr. asturur