Kevin Powell - Community•9mo ago

Sticky flickering on Chrome Mobile View

Hello everyone, is there any way to prevent this flickering from occurring when scrolling down using position: sticky? This doesn't happen if I use position: fixed; It doesn't seem to occur on Firefox's mobile view, is this something I should be worried about? Thanks in advance, here is all the css:

*, *::before, *:after {
    margin: 0;
    box-sizing: border-box;
}

.div1 {
    background-color: rgb(66, 66, 66);
    height: 20px;
    position: sticky;
    top: 0;
}

.div2 {
    background-color: #00ffd9;
    
    height: 1000px;
}

*, *::before, *:after {
    margin: 0;
    box-sizing: border-box;
}

.div1 {
    background-color: rgb(66, 66, 66);
    height: 20px;
    position: sticky;
    top: 0;
}

.div2 {
    background-color: #00ffd9;
    
    height: 1000px;
}

18 Replies

ἔρως•9mo ago

you're missing the rest of the code please, put it all in codepen or jsfiddle or a git pages

TerranceMagickman•9mo ago

Sorry, my bad: https://codepen.io/Calum-Wilkinson/pen/gOZywJr Just setting it up I noticed that it doesn't occur on codepen either.

Calum Wilkinson

CodePen

Flickering Sticky Header

...

ἔρως•9mo ago

you have a script tag in your screenshot, but i dont see any scripts in the codepen

TerranceMagickman•9mo ago

my bad I didn't realise, I've added it to the codepen now, it's not something I typed as I only made an index.html file and styles.css file.

TerranceMagickman•9mo ago

TerranceMagickman•9mo ago

I think the script comes from using the live server add-on for visual studio code because if I run the index.html, then the script tag isn't there

ἔρως•9mo ago

and on the index.html, does it still do the "flicker"?

TerranceMagickman•9mo ago

Yes, though I've noticed that the flickering only occurs on some of the phone dimensions. On others it doesn't flicker at all.

TerranceMagickman•9mo ago

Sorry about slow response

ἔρως•9mo ago

i have no idea however i added this to the .div1 class: border-bottom: 1px solid rgba(66, 66, 66, .01); and honestly ... the flickering reduced a lot it's not perfect, but it's better

TerranceMagickman•9mo ago

ah did the flickering occur on your end as well? I've just tried it on a laptop using chrome again, but the flickering doesn't occur for some reason when using that machine Thanks a lot by the way, I'll make sure to use that

ἔρως•9mo ago

it did, but it was SOOOOOOOOOOOOOOOOOOOOOOOOOOO TINY like, i barely could see it

TerranceMagickman•9mo ago

lol, that's pretty funny

ἔρως•9mo ago

i had to change the height to 60px and add background-image: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,255,217,1) 100%) to the big div, so i could see what's going on just a random gradient

TerranceMagickman•9mo ago

I guess the last thing to do is to try it on mobile, the average person probably isn't going to care if it does occur right? It's just strange because using absolute, with width 100% has no flickering at all. I'm just going to test now with nothing else running, in case its the browser lagging thats causing it.

ἔρως•9mo ago

it isn't the browser lagging i think it might be the screen scaling also, the browser may be taking shortcuts for speed, at the cost of accuracy i noticed the "jumping" is mostly on the last pixel, at the bottom, in my 1080p display

TerranceMagickman•9mo ago

You were right. Changing that gets rid of the flicking. Thanks!!!

ἔρως•9mo ago

you're welcome, but that's just the top flickering the bottom flickering is taken care of with the weird border

Gaming

Programming

Sticky flickering on Chrome Mobile View