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 https://github.com/Foliotek/Croppie/issues/764#issuecomment-918375736, 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 https://github.com/Foliotek/Croppie/issues/764#issuecomment-918875471, 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. … <#m2718906127288843723> 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) https://github.com/Foliotek/Croppie/issues/764#issuecomment-918875471>, 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 https://github.com/Foliotek/Croppie/issues/764#issuecomment-919591534, 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 https://github.com/Foliotek/Croppie/issues/764#issuecomment-920819847, 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?