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
ἔρως
ἔρως13mo ago
you're missing the rest of the code please, put it all in codepen or jsfiddle or a git pages
TerranceMagickman
Sorry, my bad: https://codepen.io/Calum-Wilkinson/pen/gOZywJr Just setting it up I noticed that it doesn't occur on codepen either.
ἔρως
ἔρως13mo ago
you have a script tag in your screenshot, but i dont see any scripts in the codepen
TerranceMagickman
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
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
No description
ἔρως
ἔρως13mo ago
and on the index.html, does it still do the "flicker"?
TerranceMagickman
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
Sorry about slow response
ἔρως
ἔρως13mo 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
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
ἔρως
ἔρως13mo ago
it did, but it was SOOOOOOOOOOOOOOOOOOOOOOOOOOO TINY like, i barely could see it
TerranceMagickman
lol, that's pretty funny
ἔρως
ἔρως13mo 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
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.
ἔρως
ἔρως13mo 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
You were right. Changing that gets rid of the flicking. Thanks!!!
ἔρως
ἔρως13mo ago
you're welcome, but that's just the top flickering the bottom flickering is taken care of with the weird border
Want results from more Discord servers?
Add your server