Blank/Black Space when Uploading Cropped Picture (in Mobile)
mikejhun opened this issue · 16 comments
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?
+1
I am also experiencing this issue in Chrome Desktop (Safari and Firefox work fine). It seems like latest Chrome updates affected it.
+1
We have a similar issue when cropping images in a pop-up.
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
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.
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
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
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!
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
@amatek Copied my answer to your stackoverflow thread :)
Ameeennnn @TkachenkoMax solutions works perfectly! God save internet!
Looks like the issue is resolved in Google Chrome 94. Can everyone else still replicate this issue?