search

onurzorluer / react-image-file-resizer

Resize Local Images with React 🌄 🌅
MIT License
317 stars 41 forks source link

UI freezes / fails when using minWidth and minHeight properties #37

Closed jacten closed 3 years ago

jacten commented 3 years ago

Describe the bug I have a loading indicator that fires when image is being resized. Works fine unless I add minWidth or minHeight properties in which case front end stops rendering. On Safari it failed to render the resulting image entirely.

To Reproduce Steps to reproduce the behavior:

  1. add minHeight and minWidth.
  2. Set loading indicator while resizing.
  3. Resize file that is smaller than minWidth.

Expected behavior Expect to function same as without minWidth and minHeight.

Screenshots

Desktop (please complete the following information):

Smartphone (please complete the following information):

onurzorluer commented 3 years ago

@yemreaybey did you test it before sending pull request? If not, please check and fix it.

YemreAybey commented 3 years ago

@onurzorluer I didn't write automated tests but I thought it is working. Would you mind assigning this issue to me? I will check and create a fix pr.

YemreAybey commented 3 years ago

@jacten I couldn't reproduce the issue could you please provide a sandbox code where you reproduce the issue. Because I tried the minWidth and maxWidth feature on our company project to resize a 400 x 300 image to 500 x 500 and it has worked as expected.

@onurzorluer

jacten commented 3 years ago

I will create one and post here later today.

jacten commented 3 years ago

https://codesandbox.io/s/vibrant-leakey-cr7bm?file=/src/App.js

This is not the best sandbox so sorry! I wasn't able to reproduce the bug with safari not working at all, so perhaps that I was wrong about that.

But you do see on chrome that the circle indicator stops spinning while image is resizing and on safari it still animates, but incorrectly. Perhaps this is just a limitation of doing this sort of thing client side?

YemreAybey commented 3 years ago

https://codesandbox.io/s/vibrant-leakey-cr7bm?file=/src/App.js

This is not the best sandbox so sorry! I wasn't able to reproduce the bug with safari not working at all, so perhaps that I was wrong about that.

But you do see on chrome that the circle indicator stops spinning while image is resizing and on safari it still animates, but incorrectly. Perhaps this is just a limitation of doing this sort of thing client side?

Yeah it seems interesting. Although the image is resized correctly ui freezes in a small portion of time. I put set time out to see what is happening clearly. Actually resize time and freeze time is equal that is why you only see freezing. On the other hand I sometimes saw that ui freezes even when using only maxWidth and minWidth bu it is so small that it is nearly impossible to catch it. I couldn't detect what is causing this issue yet. @onurzorluer would you mind checking the upper sandbox and this one: https://codesandbox.io/s/stupefied-sara-5cds0

onurzorluer commented 3 years ago

I can not reproduce this. I think it is false positive so I closed the issue.