-
Notifications
You must be signed in to change notification settings - Fork 884
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Blank/Black Space when Uploading Cropped Picture (in Mobile) #764
Comments
+1 I am also experiencing this issue in Chrome Desktop (Safari and Firefox work fine). It seems like latest Chrome updates affected it. |
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>.
|
+1 |
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 |
I have a similar problem detailed here. |
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>.
|
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?
|
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>.
|
Not sure it is an ideal solution or not. |
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.
|
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>.
|
@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? |
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?
The text was updated successfully, but these errors were encountered: