SoftGitHWeav commented 3 years ago

Steps to reproduce the behavior

Select any site, select Themes > Customize > Header Image.
Select Add New Image.
Select an image that is 1080 wide and any height.
Click Select and Crop button.
Click Crop Image.

What I expected to happen

Expected: Not to receive an error. It should instead select the image and return to the Customizer with updated image on preview.

What actually happened

Actual: Error appears. (see pics below)

Context

Noticed that when selecting other images that were smaller than 1080 in width that crop lines appear and all seems to work fine. Also images larger than 1080 in width work.

Other Notes: Edge testing was done with the Ixion theme activated. Chrome test was done with the same theme as the customer: Kent

Browser / OS version

I can replicate the error on Microsoft Edge Version 88.0.705.68 (Official build) (64-bit). I can also replicate the error in Chrome Version 88.0.4324.150 (Official Build) (64-bit).

Is this specific to the applied theme? Which one?

Replicated issue on these themes: Kent / Ixion / Button 2

Does this happen on simple or atomic sites or both?

Both

Is there any console output or error text?

Error text: There has been an error cropping your image.

Level of impact (Does it block purchases? Does it affect more than just one site?)

No.

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

TheSteveK commented 3 years ago

Another example in #3740963-zen User has worked around the issue by using a pre-cropped image and selected skip cropping. In this case, we couldn't reproduce it, but the user got the error even when using a different browser. Image width is 1280.

selectedselections commented 3 years ago

Another example in #3739945-zen Theme is Kent

The issue is intermittent and appears to work sometimes and is resolved by switching to Chrome. Image is 900 ✕ 900

khristiansnyder commented 3 years ago

I ran into a similar case today, but the issue seems to be from the image being a super high resolution: 6605 by 3552 pixels. Using a smaller, pre-cropped image worked.

devNigel commented 3 years ago

Ran into a similar issue: #3810132-zen

Theme: Perennial

User is using Safari browser.

khristiansnyder commented 3 years ago

Ran into this again today. A good place to see this happening is on the AltoFocus theme demo site as I was able to recreate this error there.

nickpagz commented 3 years ago

User reported the same error here: #3864457-zen

I've been able to reproduce this on a test site, but noticed a strange behavior. I used the same theme, Hemingway Rewritten, and used the user's same images. However, I was also able to reproduce with the Blur image recommended in the Header Image section in the Customizer, but cropped to a size of 1280x425. The default "Blur" image had no issues. Seems to be high aspect ratio images on smaller screens, at least in my testing. You can use this image to replicate, or this, from the user's site.

Here's a video of the error in action, and how to fix it (tldr. extend the browser window to trigger the crop selector to show).

https://d.pr/v/jP61At

khristiansnyder commented 3 years ago

Another report in #3874575-zen

Theme: Lovecraft.

gwensmithx commented 3 years ago

Another report: #3887055-zen

Customer was able to crop by zooming out on their mac and cropping rectangle appeared. Cropping was successful.

ahmadbaig1 commented 3 years ago

Another report: #3869993-zen

ahmadbaig1 commented 3 years ago

Another report: #3881905-zen

update Resolved by adjusting screen resolution to 110%

Google Chrome is up to date Version 89.0.4389.114 (Official Build) (64-bit)

nickpagz commented 3 years ago

Another report:

29130737-hc

JoshuaGoode commented 3 years ago

Reported on 29346062-hc

Screen Resolution:1366 x 768 Browser Size:1320 x 621 User Agent:Safari 14.1 on Mac OS X 10.14.6

Seems to have been due to window size.

kwight commented 3 years ago

Let's check core for any existing issues.

metabreakr commented 3 years ago

29738850-hc

Screen Resolution:1366 x 768 Browser Size:1366 x 657 User Agent:Chrome 90.0 on Windows 10.0.0

xpurichan commented 3 years ago

Another report in 4024246-hc.

xpurichan commented 3 years ago

I wrote some instructions for my customer so feel free to copy+paste the workaround:

1. Visit your theme customizer
2. Select the Header Image setting, then the "Add new image" button
3. In the Media popup choose your desired image.
4. Now you should be taken to crop the image but you won't see any tools (such as a selector/lasso) to be able to select which portion of the image you want to crop. **Press and hold the Control key (if using Windows) or Command key (if using Mac OS) and then press the minus key on your keyboard once and then release both. This zooms out your browser window and then suddenly the crop selection tool will appear.**
5. Set your desired image crop and finally use the "Crop image" button to apply the change. Don't forget to save/update before you exit from the theme customizer.

To undo the zoom: **Press and old the Control key (if using Windows) or Command key (if using Mac OS) and then press the 0 (zero) key on your keyboard once and then release both.**

aamills commented 3 years ago

30195242-hc

Same user again wanting to change the header and not remembering our previous instructions (or not wanting to follow them), from this comment.

kwight commented 3 years ago

@DanielSmithMichigan @andres-blanco can you look into this in our next sprint please (starting July 12)? ❤️

obenland commented 3 years ago

Surfacing this part of the workaround instructions in case they might proof helpful to narrow down the bug:

Press and hold the Control key (if using Windows) or Command key (if using Mac OS) and then press the minus key on your keyboard once and then release both. This zooms out your browser window and then suddenly the crop selection tool will appear

andres-blanco commented 3 years ago

I've been trying to hunt down this bug, I still didn't find a way to fix it. I think it's related to the height of the image and the initial size of the selection rectangle.

I think an easier workaround is just making the window wider: 2021-07-21 14 43 53