Cropper: Crash when pinch and zoom on Chrome for Android

Created on 16 Feb 2017  路  7Comments  路  Source: fengyuanchen/cropper

Hi,

Using Cropper v2.3.4 (the current version provided by bower), it crashes when zooming with the "pinch and zoom" gesture on Chrome for Android. Once crashed, I can't zoom nor move the image, and the data is corrupted. It crashes too on the official example (http://fengyuanchen.github.io/cropper/v2.3.4/). I disabled it with the option zoomOnTouch:false and there is no problem.
I created "zoomIn" and "zoomOut" buttons that execute the "zoom" function, and they work before pinchAndZoom, but fail after the gesture has been performed. Thus the gesture must break something when preformed.
I haven't seen this problem with the 3.0.0-alpha.1 version.

Is it related to the warning "Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080" raised by Chrome for Android browser at each touchMove gesture ?

Can you see to that ? I know that v3 is on tracks, but I'd rather use a "release" version for my site :)

Thanks !

BR,
Simon

Bug seen on :
Android 6.0.1; Nexus 5 Build/MOB31E and Android 7.0.0; ONEPLUS A3003 Build/NRD90M
Chrome 56.0.2924.87

Works on iPad, iPhone and desktop browsers

Most helpful comment

v3.x doesnt crash anymore but now I cant move/drag the picture after zooming in. This problem only occurs in chrome(mobile). Everywhere else it works perfectly. I also checked and made sure I added dragMode: 'move'... and I also tried to apply touch-action:none; to the div...both of those didnt work. I feel like I am missing something. Please let me know how I can fix this. Thank you so much.

All 7 comments

Sorry for the trouble, this is a breaking change in Chrome 56 to improve scroll performance. This can probably be fixed by adding an appropriate touch-action CSS rule to disable the browser's own scrolling/zooming.

Thanks for your quick reply !

Adding the CSS rule touche-action:none disable the warning, but cropper still crashes. So this is probably related to the way cropper handles the touches. The pointer events API may have been changed too ?

++

@SimonBriche see #827

Perhaps the console warning isn't related to the crash at all then (there's two separate issues).

The latest version (v3.x) already fixed this.

v3.x doesnt crash anymore but now I cant move/drag the picture after zooming in. This problem only occurs in chrome(mobile). Everywhere else it works perfectly. I also checked and made sure I added dragMode: 'move'... and I also tried to apply touch-action:none; to the div...both of those didnt work. I feel like I am missing something. Please let me know how I can fix this. Thank you so much.

hey @Mebakassahun , did you come up with a solution for this? have the same issue a while back. Any fixes you did for this?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ThameDBA picture ThameDBA  路  4Comments

jloguercio picture jloguercio  路  6Comments

zilions picture zilions  路  3Comments

airtwister picture airtwister  路  7Comments

richdenis86 picture richdenis86  路  8Comments