The offset top of the cropped area goes beyond the limit

[klyov]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report 
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Hello @fengyuanchen ,
I am using cropperjs in my React project for cropping the image.
I found an error in the behavior of cropping the picture. The getData method returns a negative value of the offset top of the cropped area y. I use viewmode 2 or viewmode 1. This is the case with a particular image. Its parameters are 6973 x 4000 and the size is 7.2 mb. I also checked it on http://fengyuanchen.github.io/cropperjs, getData returns a negative value of y.
Picture:
https://drive.google.com/file/d/1cX509PEm5ma-cTuPUE3SM7fhoY45LsA2/view
Video with error:
https://www.youtube.com/watch?v=8p6h750F51I
For the reproduction of this experiment, it is necessary to stretch the selection area quickly upwards.

Expected behavior

i think getData must return y equal to 0.

Environment

Browser:

• [x ] Chrome (desktop) version 67.0.3396.62-1
• Chrome (Android) version XX
• Chrome (iOS) version XX
• [x ] Firefox version 60.0.1+build2-0ubuntu0.18.04.1
• Safari (desktop) version XX
• Safari (iOS) version XX
• IE version XX
• Edge version XX

[fengyuanchen]

The y value is -0.00000000000024, may cause by the 0.30000000000000004 problem. I will try to fixed this.

For a quick fix, you can use cropper.getData(true) which will round each value.

[grimabe]

Hi, I am using latest version of Cropper.js (1.5.9) with viewMode set to 2 and I have a similar behaviour. (Tested in Safari (14.0.1).
I get the following result :

{
  "height": 667,
  "scaleX": 1,
  "scaleY": 1,
  "width": 1000,
  "x": 5.684341886080803e-14,
  "y": 0,
}

[gregg-cbs]

I am having the same issue, with mode set to 2.

In the mean time im fixing it with a ternary in my onCrop:

setCrop(object) {
	// theres a bug in the cropper where y can be less than 0, so we patch it here
	object.y = object.y && object.y < 0 ? 0 : object.y;
	this.crop = {...this.crop, ...object};
}

Video of issue

y.is.minus.mov