background-attachment:fixed still not supported?

Question

Created Apr ’18

Replies 32

Boosts 8

Views 37k

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?

Answer 1

nayz OP

Jan ’24

How is this not implemented yet?

Answer 2

MikaelGSaksi OP

Apr ’24

Really........?

Answer 3

pikachew OP

Apr ’24

Don't worry guys, they'll soon implement it by 2060 and of course it will the most revolutionary change in the history of web designing ever spearheaded by Apple itself!

Answer 4

cyn3rgy OP

May ’24

wow... still not working. I think I'll just leave the bad experience for iPad users... when word gets around that sites don't work on iPads, maybe things will change.

Answer 5

MARK8APPS OP

Jun ’24

I See in 2024 this issue ist still not fixed. I will test it on iOS18 and report it.

Answer 6

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).

Answer 7

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