Styles: Fixed Background Image doesn't work on iPhone

[donalirl]

Quick summary

Fixed background images set in Styles works on Android but on iOS the image is extremely zoomed in and looks bad.

Steps to reproduce

1. Go to Appearance → Editor
2. Edit the Styles
3. Choose Layout
4. Set a background image
5. Set it to 'Cover' and toggle on 'Fixed Background'
   

What you expected to happen

I expected to see the image in regular detail, like this screenshot on Android:

What actually happened

On iPhone (Safari), the image is super zoomed in:

Impact

All

Available workarounds?

No but the platform is still usable

If the above answer is "Yes...", outline the workaround.

No response

Platform (Simple and/or Atomic)

Simple, Atomic, Self-hosted

Logs or notes

#8828339-zen

[github-actions]

Support References

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

• 8828339-zen

[Robertght]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• Found this core issue: Cover Block: Fixed Background Does Not Work on Mobile WordPress/gutenberg#50669

📌 ACTIONS

• Triaged
• Needs Gutenberg core fix

[Robertght]

I'm going to keep this one open until we know more because there are two issues here:

1. The images are zoomed in: Cover Block: Fixed background causes image to be zoomed in on mobile #95238 (closed)
2. The fixed background effect doesn't work on iPhones/anything iOS related: Cover block: fixed background does not work on mobile Safari #76885

@draganescu if you have any recommendations on how should we better keep the tabs on these, let me know.

[draganescu]

@Robertght it seems the only paths forward are to wait on Gutenberg, which waits on apple or a custom block 🤷🏻 Others have custom CSS but a lot of devices support background fixed, so we'd have to have a hack in core for iphone which I don't think is right - nor do I think will ever fly 😄