Sticky elements disappear/flicker when scrolling on latest Android Chrome (85)

user_466857 0
Viewed 1412

I have a website that contains a header element with the following CSS:

position: sticky;
top: 0px;
left: 0px;
right: 0px;
z-index: 3;

In the latest Chrome on Android this element seems to disappear every time the user scrolls. It reappears when the scroll motion is done, which makes it look like the element is flickering on and off while scrolling through the page. When I simulate a Nexus 5X in desktop Chrome the same thing happens, but only when I use touch input to scroll. When I use the scroll wheel the header element stays visible the whole time. It also didn't seem to occur in older versions and it's also working fine on desktop Chrome and other browsers.

Has something recently changed about how Chrome handles position: sticky when scrolling? Is there a way to avoid this behavior?

google-chrome css
2 Answers

I'm seeing the same issue in Chrome on Android (v85.0.4183.81) when using position: sticky. It only seems to occur when the content is wider than the viewport and is being scaled down to fit it by the viewport meta tag.

I've created a minimal repro on CodePen but it needs to run full screen so will only show the issue on CodePen's debug mode which runs without the iframe: https://codepen.io/mavman/pen/ZEWxoab

Adding minimum-scale=1 to the viewport meta tag seems to fix it:

<meta name="viewport" content="width=device-width, minimum-scale=1">

This isn't an option for me as I need some content to be able to scale down to the size of the viewport so I'm still looking for a better solution.

user_20052850

Same problem, you can reproduce it using the desktop Chrome's devtools and a Galaxy S5 view with:

<html>
<head>
    <meta id="viewport" name=viewport content="width=320">
</head>

<body>

<div style="position: sticky; height:40px; top: 0px; background-color: #ff0000;">
    <p>Test</p>
</div>

<div style="height: 10000px;"></div>

</body>
</html>
user_142556540
Related