6 replies

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);
}

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

vh

vh

vh, so I tried

dvh

dvh

dvh

dvh but the issue still persists. Any suggestions?

I can link to my site if need be, not sure if it's necessary though

Background-attachment: fixed causes image to flicker on mobile

Similar Threads

Similar Threads

Similar Threads