search

sekoyo / react-image-crop

A responsive image cropping tool for React
ISC License
3.83k stars 343 forks source link

ReactCrop capturing scroll events on mobile #494

Open NathanC opened 2 years ago

NathanC commented 2 years ago

Hello! I have a large vertical image in my ReactCrop that take up the full width and height on mobile. I have a 1/1 aspect ratio crop, to select a square portion of the vertical image.

image

The user is unable to scroll past this image, because the scroll gesture is captured by ReactCrop. So the user gets stuck in this part of the form. When the user tries to scroll by gesturing on the image (outside of the crop), nothing happens, and the containing div is not scrolled.

The behavior I would like is that, if the user gestures on the crop itself, the crop is moved. However, if the user gestures on the blank space in the image outside of the crop, it should scroll past the image.

I'm guessing what's happening is touch or gesture scroll events (not sure how it's handled on mobile) are being caught and not allowed to bubble. Would it be possible to check if the user is pressing in the bounding box of the crop, and bubble the scroll event if the user it outside of the crop?

Thanks in advance!

NathanC commented 2 years ago

Sorry, accidentally posted. Editing.

NathanC commented 2 years ago

Alright, post is ready now.

rosareyes commented 1 year ago

Is there any news on this? I'm currently having the same issue

sekoyo commented 1 year ago

Not sure how this would be fixed since the crop has to capture input in order to draw. It would also be a bug to scroll as the user is trying to draw a crop (and there have been bugs about that a long time ago).

I would suggest a fullscreen experience for mobile (this is what apps do like Photos, Whatsapp and all others). Or have an edit mode and then set the disabled to true.

rosareyes commented 1 year ago

Exactly, that's what I did, and I have set disabled to true, so the user can only click on the squares generated but not modify them, but in this scenario, is there a way of having disabled = true, and the user could scroll down and still being able to click on the square to enter edit mode?

For example here, disabled = true, and if we tap the crop square, we enter edit mode, but we cannot scroll.

Thank you in advanced. photo_2022-11-22_22-52-53

sekoyo commented 1 year ago

Exactly, that's what I did, and I have set disabled to true, so the user can only click on the squares generated but not modify them, but in this scenario, is there a way of having disabled = true, and the user could scroll down and still being able to click on the square to enter edit mode?

For example here, disabled = true, and if we tap the crop square, we enter edit mode, but we cannot scroll.

Thank you in advanced. photo_2022-11-22_22-52-53

Ah I see, in this case it sounds like a bug and disabled = true should allow scroll, I will fix that

sekoyo commented 1 year ago

Exactly, that's what I did, and I have set disabled to true, so the user can only click on the squares generated but not modify them, but in this scenario, is there a way of having disabled = true, and the user could scroll down and still being able to click on the square to enter edit mode?

For example here, disabled = true, and if we tap the crop square, we enter edit mode, but we cannot scroll.

Please try 10.0.9, should be able to scroll with disabled=true

sarthaksaklecha-jtg commented 1 year ago

can we resize the large images according to view port/container size to avoid overflow/scroll?