Kevin Powell - Community•17mo ago

Background-attachment: fixed causes image to flicker on mobile

When I'm on mobile, and I scroll down to the point where the browsers' url bar disappears, the background-image flickers into a new place.

section {
    display: flex;
    flex-direction: column;
    color: white;
    background: center / cover no-repeat url("../assets/hero.webp") fixed;
    min-height: min(90vh, 50rem);
}

section {
    display: flex;
    flex-direction: column;
    color: white;
    background: center / cover no-repeat url("../assets/hero.webp") fixed;
    min-height: min(90vh, 50rem);
}

I thought it might be because I was using vh, so I tried dvh but the issue still persists. Any suggestions? I can link to my site if need be, not sure if it's necessary though

4 Replies

croganm•17mo ago

Let me know if any of this helps! https://stackoverflow.com/questions/20268962/fixed-attachment-background-image-flicker-disappear-in-chrome-when-coupled-with

Stack Overflow

Fixed attachment background image flicker/disappear in chrome when ...

I am currently doing a parallax website theme. The background images need to be attached as fixed for certain 'div's and 'section's to avoid jquery indulging in everything. The problem was the back...

vinceOP•17mo ago

Ah I saw that, let me try again I think I'm just gonna remove the parallax on mobile tbh 😂 All these solutions look hacky to me

croganm•17mo ago

Haha I'm sure there's an example out there that does it well

vinceOP•17mo ago

Ya there definitely is but I'm too lazy to try to fix it atm 😂 I was hoping there would be something quick and easy but looks like there might not be Thanks anyway!

Gaming

Programming

Background-attachment: fixed causes image to flicker on mobile