Thanks for helping. This is the page that I’d like to have tested with your iMac and MacBook: https://020webdesign.nl/portfolio/TSE/en-intro.php. On my iPad, the fixed background of the menu, using background-attachment:fixed, is not supported. I therefore created an alternative background for iOS devices but hope that on Apple desk- and laptops it is supported. It creates a window effect.
The fixed body background uses the pseudo element technique that you describe, Paul. And that works fine indeed on that level. But not for the menu window effect, unfortunately.
I believe it’s only ios that does not support the fixed attachment so will not work on phones or ipads.
Apple desktops and laptops on the other hand should be fine and safari on my imac is working fine.
Generally I detect support for touch devices (either with js or css supports) and then lump them all together as it will be 99% phones and tablets. You can then change to a different effect for those devices.
As I said above if you want full support then you are into scripting it as in my demo above.
There is a hack you could use but is very magic numberish. It relies on not using a white background for the centred page and then using box-shadow on the menu to create a hole in the page that you can see through but spreads the box-shadow throughout the page.
There is also a method of using -webkit-mask-image to create holes in the background but is just too awkward here. It’s probably best just to give devices that can hover ( using css supports any-hover) a fixed background and others a static background.