Cover Block: Fixed background causes image to be zoomed in on Safari browser in iPad and iPhone

[devNigel]

Quick summary

The cover block image is zoomed and blurry in Safari on iPad and iPhone if the Fixed background setting is enabled.

On a related note, the. fixed background setting does not work on mobile, it is reported here: #35800

Steps to reproduce

1. Add a Cover block with Fixed background image setting.
2. Visit the site on Safari browser on iPad. You can use BrowserStack to test.
3. You will notice that the image is zoomed in and blurry in Safari.
4. If you check in Google Chrome, you will notice that the image is not fixed, but it is not blurry like in Safari.

What you expected to happen

Fixed background settings shouldn't cause the image to be zoomed in and blurry settings

What actually happened

The image should not be blurry and it should be fixed.

Context

Slack thread: p1635302725391100-slack-C03TY6J1A

Chat: 32416087-hc
Follow up ticket: 4407792-zen

Operating System

iOS

Browser

Apple Safari

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

No, was able to reproduce with multiple themes.

Other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, easy to implement

Workaround details

Disable Fixed background.

[Robertght]

Thank you for reporting this @devNigel !

It appears to be related to this core issue: WordPress/gutenberg#17718

For everyone who encounters this on WordPress.com, feel free to add your reports here.

[dpasque]

This issue is tracking an issue in another repository. All +1's of end-user reports should be done on this issue, while any discussion related to the issue itself and its fix should be done on the issue in the outside repository.

[pauloeaquino]

Same type of issue encountered in 32189249-hc (Followup in 4449254-zen)

[paaljoachim]

How is this issue coming along?

[aleone89]

There was another report of this here: hc-33587816 - this user also reported that this happens with Chrome installed on an iPhone.

[Agepeuve]

Another case in 33401257-HC

[csabarakasz]

5205392-zd-woothemes the same issue here. iOS Safari. I tried CSS code suggestion in the public repository, but it didn't work.

[tomasztunik]

We've had some fixes deployed for that along with Gutenberg 13.2. Can 5205392-zd-woothemes (don't have access) be replicated if the current version of Gutenberg is installed? What version of WP/G was it reported with?

Re. fixed background - as for today (ios 15.5) it is currently not supported by iOS at all on the platform level.

[gwensmithx]

Hi all - let me know if you want a new report opened for this but it appears this is affecting other browsers now too - I've tested on Chrome and Firefox and also using Windows w/ Chrome on Browserstack.

We had multiple reports today of images in the Cover Block suddenly being very zoomed in. Customers noticed this after making an unrelated change to their page and clicking update.

I'm able to replicate by just adding a cover block to my test site and you can see it zooms right in when toggled. It appears to only affect simple sites. I could not replicate on AT / self-hosted.

#5296698-zd, #5295781-zd, #5295697-zd

[rw-ye]

• Follow-up in a new ticket for 5295697-zd-woothemes when the issue has been fixed.

[1dr0]

• The user may be encountering the same over here 5297555-zen.

[pauljacobson]

• In 5296698-zen the user told us that they are using macOS Catalina, and are using Safari 15.5

[marutim]

• Follow up required for 5296698-zen

[st8matrix]

• Another report here is 5329312-zen

[cintacks]

• User looking for followup on this issue: 5331917-zd-woothemes

Provided a CSS workaround that seems to work in this particular instance:

.wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax, .wp-block-cover__image-background.has-parallax, video.wp-block-cover__video-background.has-parallax {
	background-size: cover;
	background-position: 53% 50% !important;
}

[Greatdane]

I wonder if Automattic/themes#1759 is related to this?

[cometgrrl]

@Automattic/dotcom-pqa-group Can some check if this is reproducible on a Jurassic.ninja site with the latest Gutenberg plugin active? If it is, we should move it to WordPress core. Otherwise, we'll look at finding someone in Forge to take a look.

[jordesign]

I'm unable to recreate this on a Jurassic.ninja site - either with Gutenberg plugin active or inactive.
https://eventual-swift.jurassic.ninja/

[TeniCola]

• Another user asking for a follow for this issue -- 5354565-zen

They're on a Personal plan, so CSS isn't feasible as a workaround unless we applied the feature as coutesy.

Meanwhile, in addition to the user's site, I was also able to recreate this behavior with the Cover block on a test site, and it happened in the editor view as well as the live site.

[ccwalburn]

Working with the user here 5296698-zen

Resized one of their images to 1200 x 803 and tested on my own test site and the image looks correct at that size.
Currently, the image is 5236 ✕ 3503 and over 7 MB.
Suggested to the user that they resize and optimize their images as a workaround.

(I also found that I could fix this with the larger images by adding the background-size: cover declaration to the cover block in the editor code view, so I'm noting that here as additional information in case it's useful)

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 4407792-zen
• 4449254-zen
• 5205392-zen
• 5296698-zen
• 5295781-zen
• 5295697-zen
• 5297555-zen
• 5329312-zen
• 5331917-zen
• 5354565-zen
• 5712779-zen
• 5897938-zen
• 6033927-zen

[yansern]

While the actual fix is in Gutenberg WordPress/gutenberg#42470, if escalation is needed, here's a phab patch for a temp fix in WPCOM. D84701-code

Also related to #64682.

[youbrokesomething]

Looks like this was fixed in Gutenburg 13.8 so I'm going to close this ticket for now.

[ariel-maidana]

It seems this bug has returned: 5712779-zd-woothemes
The core issue is closed. Should I re-open it or do we have to do some tests on our end first?
I can reproduce the issue on a test site:

Screen.Capture.on.2022-11-17.at.11-04-39.mp4

[jamiepalatnik]

📌 SCRUBBING : RESULT

• Tested on Simple - Uncertain
• Tested on AT - Uncertain
• Tested on Self-hosted - Uncertain
• Replicable on Core - No

📌 FINDINGS/SCREENSHOTS/VIDEO

• I tested using the steps from the initial report:

1. Add a Cover block with Fixed background image setting.
2. Visit the site on Safari browser on iPad. You can use BrowserStack to test.
3. You will notice that the image is zoomed in and blurry in Safari.
4. If you check in Google Chrome, you will notice that the image is not fixed, but it is not blurry like in Safari.

• Using Browserstack, I checked iPad Pro 12.9 2020 and 2018, Safari browser.
• I was not able to recreate the issue with the image zoomed in or blurry, but the fixed background effect didn't seem to be working.
• I think it would be helpful if someone is able to test this on an actual iPad since I think my testing on Browserstack may be limited, so I'm marking as triaged for further review.

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[zdenys]

Another instance 37845107-hc They asked to let them know once it's fixed.

[khristiansnyder]

Also reported in 37222039-hc
AT site
Theme: Appleton
I could replicate on iOS/iPhone.

[zdenys]

5897938-zd-woothemes

[taipeicoder]

I can reproduce this issue by opening https://rockfielddemo.wordpress.com/ on an iPad. Screenshot for reference:

This seems like a regression from Gutenberg. As a follow-up, I've created the following issue WordPress/gutenberg#47726.

[rw-ye]

Another report 6033927-zd-woothemes

Simple site
Theme: Russell

[DustyReagan]

Now that Guttenberg 15.6 is deployed to WPCOM & Atomic, our fix for this issue is in production. If you're still seeing this problem, please feel free to re-open this GitHub issue.