background-attachment:fixed still not supported?

Question

FrankieGTH OP

Created Apr ’18

Replies 32

Boosts 8

Views 36k

Participants 37

Every now and then I need to make a website. And I noted in my last project that

background-attachment:fixed;

is still not supported by iOS. It is by Safari on MacBooks, so I'm wondering what the story behind it is? Surely it is not a matter of computational cost due to the so-called repainting of the browser's canvas? Because doesn't playing video cost a multitude of that?

Boost

Answer 1

ddc_adf OP

Jan ’25

Still an issue on iOS 18.1.1 (iPhone 12 Mini); and confirmed on one other iPhone (not sure model it would probably be later than that).

0

Answer 2

crea64 OP

Jan ’25

I have a solution (pure CSS, no JS) :

HTML

<div class="parallax-container">
    <div class="parallax" style="background-image:url('your_picture.jpg')"></div>
</div>

CSS

.parallax-container {
    position: relative;
    width: 100%;
    height: 400px; /* Adjust as you wish */
    overflow: hidden;
}

.parallax {
    height: inherit;
    width: 100%;
    clip-path: inset(0 0 0 0);
}

.parallax::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: inherit;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

Why this works: • Avoids background-attachment: fixed;, which Safari struggles with. • Uses ::before { position: fixed; } to achieve the same effect. • Fully compatible with Chrome, Firefox, Edge, and Safari. (and iOS !)

Hope this helps others facing this issue!

Detailed information on my blog: blog.crea64.net

0