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:
18 Replies
you're missing the rest of the code
please, put it all in codepen or jsfiddle or a git pages
Sorry, my bad: https://codepen.io/Calum-Wilkinson/pen/gOZywJr
Just setting it up I noticed that it doesn't occur on codepen either.
you have a script tag in your screenshot, but i dont see any scripts in the codepen
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.
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
and on the index.html, does it still do the "flicker"?
Yes, though I've noticed that the flickering only occurs on some of the phone dimensions. On others it doesn't flicker at all.
Sorry about slow response
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 betterah 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
it did, but it was SOOOOOOOOOOOOOOOOOOOOOOOOOOO TINY
like, i barely could see it
lol, that's pretty funny
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 gradientI 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.
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
You were right. Changing that gets rid of the flicking.
Thanks!!!
you're welcome, but that's just the top flickering
the bottom flickering is taken care of with the weird border