Cover Block: Fixed Background Does Not Work on Mobile

[karenroldan]

Description

Originally reported in Automattic/wp-calypso#76885

Quick summary

When the fixed background option of the cover block is enabled, it works on all platforms except mobile Safari.
It might be related to this previous issue: Automattic/wp-calypso#57390

Steps to reproduce

1. Open or create a template in the Site Editor.
2. Add a Cover block.
3. Set a background image.
4. Set the background as fixed.
5. Visit the site using mobile and scroll down.
6. What you expected to happen
7. The background should be fixed, showing a parallax effect.

What actually happened

The background moves with the rest of the page.

Impact

All

Logs or notes

Summary

Step-by-step reproduction instructions

1. Open or create a template in the Site Editor.
2. Add a Cover block.
3. Set a background image.
4. Set the background as fixed.
5. Visit the site using mobile and scroll down.
6. What you expected to happen
7. The background should be fixed, showing a parallax effect.

Screenshots, screen recording, code snippet

Mobile

mobile.mov

Desktop

Environment info

• Gutenberg: v15.7.1
• Tested on the actual device: Chrome and Safari and the issue is reproducible
• iPhone with iOS 16.4.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[robinglen]

@draganescu I asked here (Automattic/wp-calypso#76885) but to complete the loop is there any update here?

[draganescu]

Hi there! This issue does not appear to be worked on yet. Are you planning to try a PR - I think I inferred that from the other issue?

[robinglen]

Hi @draganescu thank you for getting back to me.

We are waiting to see if our client is interested in us submitting a PR or wants us to build our own new component in their thee. However for transparency and anyone else looking into this ticket, from our research and the other ticket, here are some findings:

The main issue is because Apple have decided to not support background-attachment; on iOS for iPhone and iPad, we believe this is because of performance issues caused by this attribute.
https://developer.apple.com/forums/thread/99883

The required behaviour is not impossible as you can see it on this codepen: https://codepen.io/Everybodyknows/pen/abbyLOZ

However the build of this codepen is a completely different structure to the Guttenberg component in question. There are a couple of ways we could create this behaviour that works across those platforms.

1. The surrounding components having solid backgrounds (which isn't currently the case on our project - the parallax images basically always sit behind the content in this solution, so anything at all without a background would show the image)
2. Each parallax component getting subsequently bigger z-indexes, i.e first one needs a z-index:1, second needs z-index:2 etc

So we think there is no simple CSS hack to trick we can do to fix the existing component, if we want to solve this we believe the component will need to be built in a different way.

For now we are waiting to hear from our client, personally based on the effort involved to fix it vs customer impact we don't think it will go ahead however if it does I will let you know.

[draganescu]

Thanks for the awesome in depth description @robinglen 🙇🏻 I added the blocked label since I think this can be fixed only when the rule will become supported.

[Robertght]

@draganescu I've also linked this report Automattic/wp-calypso#95234, but aside from the fixed background that's not working, we also seem to experience a Zoomed-in view. A bit of a 2 in 1 issue. I reported the Zoom separately here first but decided to close it in favor of the one above.

Is there a way to better organize these?

[draganescu]

@Robertght I don't think there is a better way. I would not keep duplicate issues anywhere and if they're 100% caused by the same problem (the zoom and the blank) then just keep one, augment the content and close the other.

I wonder if we should try maybe a color fix or something...