Could you test something with a MacBook for me?

HTML & CSS
1

Hello,

Do you have a MacBook with OS 14+? If so, would you be willing to test something for me? It concerns the rendering of background-attachment: fixed. According to https://caniuse.com/mdn-css_properties_background-attachment_fixed that should be supported by MacBooks but CanIUse contains more errors. So I’d like to be sure.

1 Like
2

Sorry I don’t have a macbook to test on but the fixed attachement does work on my old imac in Safari.

I used this as a quick test page:

However it does not work on any of my phones using IOS (and never has).

For that reason I tend never to use background-attachment fixed unless you offer ios something different.

If you are just looking for one fixed body background image then you can do that by using a pseudo element and position:fixed instead.

body:after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: url(https://picsum.photos/id/1015/2000/1500) no-repeat 50% 50%;
  background-size: cover;
}

If you want multiple fixed elements and want to support ios then you need to script it as in this demo.

If you have a specific use-case in mind then maybe one of the above methods could be adapted.:wink:

1 Like
3

Works fine on my MacBook using Ventura. (Would have been nice if you’d linked to a live demo we could test, though. :wink: )

1 Like
4

Hey Paul and Ralph,

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.

R.,
Frank

1 Like
6

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.

Here’s a live screenshot.

Screen Shot 2023-05-20 at 13.11.29
Screen Shot 2023-05-20 at 13.11.291062×997 117 KB

CSS:


#restContainer{
background:transparent;
overflow:hidden;
}
nav ul{
box-shadow:0 0 100vw 999rem white;
}
main{position:relative}

(It will break the sticky menu unfortunately).

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.

1 Like
7

Too bad that the box-shadow technique breaks the sticky menu, Paul. Otherwise I certainly would have used it.

I’ll just keep the alternative static menu background for the iOS devices. (On mobile Android devices, the fixed menu background is supported, so I shouldn’t switch from JS detection to any-hover.)

2 Likes
8

Yes, it works fine on my MacBook.

2 Likes