Blank/Black Space when Uploading Cropped Picture (in Mobile)

[mikejhun]

Hi - when I upload a cropped picture, it now has blank/black space on the right or bottom side of the picture. I didn't have this issue before but has started last week. It seems to only be an issue when I use it on my phone (mobile view). Any idea what could be the issue?

[ipehov]

+1

I am also experiencing this issue in Chrome Desktop (Safari and Firefox work fine). It seems like latest Chrome updates affected it.

[mikejhun]

Seems to be only Chrome related for me as well. Any ideas on a workaround?

…

On Mon, Sep 13, 2021, 12:42 PM Igor Pehov ***@***.***> wrote: +1 I am also experiencing this issue in Chrome Desktop (Safari and Firefox work fine). It seems like latest Chrome updates affected it. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#764 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADY5IOWKXAUGAZHQCDPWQ5TUBYSYFANCNFSM5D54POQA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[bahman616]

+1
We have a similar issue when cropping images in a pop-up.

[preemajames]

We, too, have the same issue in the model pop up.Any ideas on a workaround? This issue is existing with latest chrome and edge browser

[amatek]

I have a similar problem detailed here.

[mikejhun]

Not ideal, but found a temporary workaround that works for me: 1) Problem: Chrome Updates are causing black/blank lines on border of image, when you zoom out from Initial Default Zoom (slightly zoomed in). 2) Solution: -Set Minimum Zoom to Initial Default Zoom (partially zoomed in), -Go into croppie.js -Go to "function _updateZoomLimits" -CHANGE: "minZoom = Math.max(minW, minH);" TO "minZoom = Math.max((boundaryData.width / imgData.width), (boundaryData.height / imgData.height));" -Now you cannot zoom out greater than the default zoom, which was causing those lines. . Hopefully someone can find a strategic fix, where you can zoom out all the way and not have these issues.

…

On Tue, Sep 14, 2021 at 3:13 AM Amatek ***@***.***> wrote: I have a similar problem detailed here <https://stackoverflow.com/questions/69173325/misalignment-and-black-blank-upload-when-cropping-images-with-croppie-js-and-a-m> . — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#764 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADY5IOTTG5RYZYKFCSMKMETUB3YZHANCNFSM5D54POQA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[amatek]

Thanks for your response. I have tried your suggestion but the issue persists. Do you experience the same or a similar issue mentioned here when you visit the Codepen links? If you do, can you test your suggestion to see if it makes a difference on your device?

Not ideal, but found a temporary workaround that works for me: 1) Problem: Chrome Updates are causing black/blank lines on border of image, when you zoom out from Initial Default Zoom (slightly zoomed in). 2) Solution: -Set Minimum Zoom to Initial Default Zoom (partially zoomed in), -Go into croppie.js -Go to "function _updateZoomLimits" -CHANGE: "minZoom = Math.max(minW, minH);" TO "minZoom = Math.max((boundaryData.width / imgData.width), (boundaryData.height / imgData.height));" -Now you cannot zoom out greater than the default zoom, which was causing those lines. . Hopefully someone can find a strategic fix, where you can zoom out all the way and not have these issues.
…
On Tue, Sep 14, 2021 at 3:13 AM Amatek @.***> wrote: I have a similar problem detailed here https://stackoverflow.com/questions/69173325/misalignment-and-black-blank-upload-when-cropping-images-with-croppie-js-and-a-m . — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#764 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADY5IOTTG5RYZYKFCSMKMETUB3YZHANCNFSM5D54POQA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[mikejhun]

Sorry, but it appears your bug is the opposite of mine. Mine was only happening on Mobile, while it seems like yours is only happening on Desktop?

…

On Tue, Sep 14, 2021 at 7:56 PM Amatek ***@***.***> wrote: Thanks for your response. I have tried your suggestion but the issue persists. Do you experience the same or a similar issue mentioned here <https://stackoverflow.com/questions/69173325/misalignment-and-black-blank-upload-when-cropping-images-with-croppie-js-and-a-m> when you visit the Codepen links? If you do, can you test your suggestion to see if it makes a difference on your device? Not ideal, but found a temporary workaround that works for me: 1) Problem: Chrome Updates are causing black/blank lines on border of image, when you zoom out from Initial Default Zoom (slightly zoomed in). 2) Solution: -Set Minimum Zoom to Initial Default Zoom (partially zoomed in), -Go into croppie.js -Go to "function _updateZoomLimits" -CHANGE: "minZoom = Math.max(minW, minH);" TO "minZoom = Math.max((boundaryData.width / imgData.width), (boundaryData.height / imgData.height));" -Now you cannot zoom out greater than the default zoom, which was causing those lines. . Hopefully someone can find a strategic fix, where you can zoom out all the way and not have these issues. … <#m_2718906127288843723_> On Tue, Sep 14, 2021 at 3:13 AM Amatek *@*.***> wrote: I have a similar problem detailed here https://stackoverflow.com/questions/69173325/misalignment-and-black-blank-upload-when-cropping-images-with-croppie-js-and-a-m . — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#764 (comment) <#764 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADY5IOTTG5RYZYKFCSMKMETUB3YZHANCNFSM5D54POQA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub . — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#764 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADY5IOSQXT6EK7LPPBWMFF3UB7OMDANCNFSM5D54POQA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[preemajames]

Not sure it is an ideal solution or not.
After I added the style
body .modal-dialog { margin-left: 0 }
the issue is resolved, but the pop up appeared on the left rather than centre
Sample is here

[TkachenkoMax]

Hello, guys!
Got this problem on latest Chrome when used croppie inside of modal
Helped me to change style in bootstrap modal .modal-dialog class

Setting transform to unset instead of using translate function.

Hope it helps you too

[bahman616]

Hello, guys!
Got this problem on latest Chrome when used croppie inside of modal
Helped me to change style in bootstrap modal .modal-dialog class

Setting transform to unset instead of using translate function.

Hope it helps you too

This worked for us! Thank you!

[amatek]

Thanks! This worked. It seems Croppie is unable to identify "transform: translate" operations on some devices while placing the image in the modal. I would appreciate it if you can post your answer here. I am sure it will help more people.

Hello, guys!
Got this problem on latest Chrome when used croppie inside of modal
Helped me to change style in bootstrap modal .modal-dialog class

Setting transform to unset instead of using translate function.

Hope it helps you too

[mikejhun]

This works - thank you!

…

On Thu, Sep 16, 2021, 7:29 AM Amatek ***@***.***> wrote: Thanks! This worked. It seems Croppie is unable to identify "transform: translate" operations on some devices while placing the image in the modal. I would appreciate it if you can post your answer here <https://stackoverflow.com/questions/69173325/misalignment-and-black-blank-upload-when-cropping-images-with-croppie-js-and-a-m>. I am sure it will help more people. Hello, guys! Got this problem on latest Chrome when used croppie inside of modal Helped me to change style in bootstrap modal .modal-dialog class [image: image] <https://user-images.githubusercontent.com/15245651/133401759-8548e989-7a89-45e5-be2e-7dddb53e12ba.png> Setting transform to unset instead of using translate function. Hope it helps you too — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#764 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADY5IORNKD4R4JHN5EF4A23UCHIKXANCNFSM5D54POQA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[TkachenkoMax]

@amatek Copied my answer to your stackoverflow thread :)

[nrmerlis]

Ameeennnn @TkachenkoMax solutions works perfectly! God save internet!

[bahman616]

Looks like the issue is resolved in Google Chrome 94. Can everyone else still replicate this issue?