Fabric.js: [Gestures] Pinch gesture on objects with certain minimum spacing above the canvas causes weird scaling behaviour

Created on 28 Apr 2016 · 6Comments · Source: fabricjs/fabric.js

Version

1.6.0
(custom build: modules=ALL exclude=node)

Devices used for testing

iPhone 5s (iOS version 8.3)
Nexus 5 (Android version 6.0.1)

Description

If you try to use the pinch gesture to increase the scale of an object (tested fabric.Image and fabric.Rect) when there's a certain minimum space above the canvas the scaling doesn't work like it's supposed to. (not sure how much this height is, but it feels like it needs to be equal to or more than the window size)

Fiddle Link

If you run the fiddle on a mobile device and try to use a pinch gesture to increase the size of the image it will actually decrease in size.
If you then run it again, remove the spacing and try to increase the size (by using the pinch gesture) it works as intended.

Source

Arencia

👍4

Most helpful comment

I commented out bbox.scrollTop -= bbox.scrollBodyTop at the end of root.getBoundingBox function and the bug seems to be gone. This would keep the value of bbox.scrollTop at 0. Does anyone know what issues this change might cause? Ideally would like to just fix the pinch and zoom calculations rather than impacting other features.

roblum on 15 Jul 2016

👍2

All 6 comments

oh thanks, i was trying to figure out why pinch does not always works good.
I hope this lead us on the right way.

asturur on 28 Apr 2016

👍2

experiencing a similar issue when there is a lot of content above the canvas. when scaling an image larger with pinch and zoom, the asset actually jumps to a smaller first and then starts to scale up.

roblum on 15 Jul 2016

👍2

Isolated this bug to a calculation in the default case of addTouchStart function. When commenting out bbox.scrollTop from the pt.offsetY calculation, pinch and zoom behaves normally.

roblum on 18 Jul 2016

I tried to comment out the bbox.scrollTop -= bbox.scrollBodyTop & also commented out the bbox.scrollTop on version 1.6.3 The pinch and zoom still reacts odd with the asset reducing in size. I'm wondering if there is anything added since 1.6.0 that may cause this to still be an outstanding bug.