TOUCH and TOUCHMOVE related problems.

[asturur]

I have no touch device for debugging. I m in the process of getting one or buying one.

I reference here all the issue to verify and fix. Please add here the new issues related to touch.

[ncou]

https://github.com/kangax/fabric.js/issues/3886

[p3ndu]

Hi @asturur,

Any update on when this issue will be fixed? For a basic functionality it would be great to have at least a simple way to set all event listeners as passive.

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:472 [Violation] 'mousedown' handler took 180ms
6zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:472 [Violation] 'mousedown' handler took 157ms
2zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:472 [Violation] 'load' handler took 157ms
zone.js:472 [Violation] 'load' handler took 344ms
zone.js:472 [Violation] 'load' handler took 283ms

Regards, Alex

[BiosElement]

Noticed this was still an issue. Think It'd work with them just manually set as passive?

[asturur]

tomorrow i finally put hands over my touch device. i can see what are implications of touch events, scrolling, gesturing over the canvas, scrollable pages and so on.

i have no idea yet of what a dev should have as configuration

[asturur]

reference here also #4189

[darjiyogen]

I am facing issue with Textbox when use two finger scaling on mobile device, Steps - Slightly scaling the Text object dramatically and make it very large and impossible to use.

[Bazeloth]

Any update on this?

[vutran1927]

There are movementX and movementY value in "mouse:move" event, how can i get there value on "touchmove" event ? I am trying to enable touch zoom/panning on canvas

[sergiisav]

Hey! I guess some people will also land here in 2018 while using 1.x.x version of the library, so here is a thing that helped me. I couldn't easily update to 2.x.x (where the issue is fixed), so I've moved the fix to my 1.7.9 ;)

1. Change 'touch-action': 'none' to 'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none'
2. When initializing the canvas object, set allowTouchScrolling to true:

   canvas = new fabric.Canvas('.canvas', {
   width: parentDiv.width(),
   height: parentDiv.width(),
   allowTouchScrolling: true,
   });

Enjoy! Hope that helps! ;)

[liambarr]

Hey! I guess some people will also land here in 2018 while using 1.x.x version of the library, so here is a thing that helped me. I couldn't easily update to 2.x.x (where the issue is fixed), so I've moved the fix to my 1.7.9 ;)

1. Change 'touch-action': 'none' to 'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none'
2. When initializing the canvas object, set allowTouchScrolling to true:

canvas = new fabric.Canvas('.canvas', {
  width: parentDiv.width(),
  height: parentDiv.width(),
  allowTouchScrolling: true,
});

Enjoy! Hope that helps! ;)

Where about's would one change touch-action? Currently, I'm just doing it through CSS

[asturur]

check in the current codebase where that line now is. It should be enough.

[Scanerrr]

Is it fixable #5294 ?

[SooChang-Lee]

Scaling with the corner control is very smooth because the applyResizeFilters function is called when the finger released.

However, when scaling an image with a multi-finger, the applyResizeFilters function is applied on every frame, so lag is heavier.

If not use the resize filter, it will be a little smoother when scaling with multi-fingers, but still laged rather than scaling with corner controls.

I hope this problem is resolved to provide high quality image to mobile users with resize filters.

Thank you...

[Scanerrr]

Is it fixable #5294 ?

I kinda meant this part: "pinch gesture will resize the element immediately depending on the distance between the two touch positions"

Experience with zooming by pinch is a twitched

Or maybe there is a way to add some kind of threshold, for gesture, so pinch will work after pinch moving, and not right away

[asturur]

the pinch should be routed to use the normal scaling functions, so it avoids resize every single time.

[msi008]

The author, you filed the problem, but you solved it，#3886 How to solve @asturur

[shiyasvp92]

I was using 3.6.3. But allowTouchScrolling didnt work. Then I upgrade it, still no luck. Then I downgraded to 3.3.2. Luckily scrolling works on mobile. But unfortunately, while drawing or moving object its scrolling. So, that makes app unusable. Tried all solution pointed above. Any help will be appreciated. Thanks

[Gerwin-prog]

Please see issue: #2621 - I've suggested a fix - this will break mobile functionality on any page that has scroll & implements text + the LongPress event

[anhduy157]

@shiyasvp92 I'm glad your downgrading helped me. Thank you

[pnikhil610]

There's an issue when you touch move canvas when image is under it.

When allowTouchScrolling is enabled, both events are triggered together: the object is moved and canvas is scrolled if an object is under when you touchstart moving.