Page Background Slippage?

User31

The background image slips up/or down momentarily when scrolling either way.

User31

I've tried googling for answers, except I don't know what exactly this issue would be referred to as.

Does anyone know what this slippage issue is called?

neoncube

User31 Possibly something like "background image scroll lag".
My guess is that the background is being scrolled via JavaScript instead of CSS, as CSS shouldn't have this issue.

Can you drop a link to the forum? I might be able to take a look 🙂

User31

neoncube

Oh absolutely.
Should be able to see it occurring @NicheForumPF

luceos

Dropping this from mobile

https://www.w3schools.com/cssref/pr_background-attachment.php

User31

luceos 😂Wait what?

Do ya mean drop the entire page background image on mobile?

luceos

User31 no that's css, the background-attachment: fixed; on the same html element that has the background image, should fix the image while scrolling

User31

luceos

Ahh, I see now.
Tbh I was confused by the W3 link because....ahhh😄.... I'm still using the same code you hooked me up with at the beginning.

/* ((2)) LUCEOS' MAIN PAGE BACKGROUND */
body {
    background-image: url("https://asylum.flarum.cloud/assets/files/2024-08-10/1723247283-465702-compress-20240810-114658-8089.jpg?auto-compress&cs=tinysrgb&w=1260&h=750&dpr=2") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ((2)) LUCEOS' MAIN PAGE BACKGROUND */

Only changes I've made are adding the image url & changing background-size: cover cover; to background-size: cover;

EDIT: Just noticed the slippage doesn't seem to occur with the PWA.
But does still occur while using browsers—although not exactly the same as it was in the OP screenshot slippage.
Now it's more like a flickering glitchy slippage.
And happens so quickly I can't even take a screenshot.