'Shrinking sticky sticky header causes flicker in Blink/Webkit at certain scroll positions

I have a sticky header which utilizes IntersectionObserver to gain a class when stuck, which then hides a few elements and reduces the size of the logo. Of course, when the height of the header shrinks, so does the scroll height, and so if you scroll down just enough to shrink the header, it shrinks, then realizes it's no longer stuck so grows, but that cause it to shrink again, so it grows, and so on in an infinite loop. This seems to be most egregious in Chrome, but I've seen it happen in Firefox as well (though Firefox seems to recognize what's happening and sorts itself out).

I've tried numerous things, including a setTimeout() to delay when the class gets removed, adding equivalent margin-bottom to the header when it shrinks, displaying a hidden element with a height of the shrunk space, but nothing seems to fix this problem.

I know I've seen this on other sites before as well, and I suspect this is just a systemic problem with shrinking headers, but is there anything I can do to prevent this from happening? I'm out of ideas.

const OBSERVER = new IntersectionObserver(
    ([e]) => e.target.classList.toggle("js-is-sticky", e.intersectionRatio < 1),
    {
        rootMargin: document.getElementById("wpadminbar") ? "-32px 0px 0px 0px" : "0px 0px 0px 0px",
        threshold: [1],
    }
);

OBSERVER.observe(document.querySelector(".sticky-block"));

CSS and markup is a bit more complicated (and slightly irrelevant), so if needed, please refer to our demo site here. https://gepl.myweblinx.net/

If anything else is needed I'd be happy to add it.

EDIT 1: I see this answer suggests putting a container around the element that retains the correct height, but that won't work with position: sticky; as position: sticky; only works for the closest container (unless someone knows how to get around this?)

EDIT 2: I was overthinking the answer from my first edit

javascriptcssresizestickyintersection-observer


Solution 1:[1]

Well, that was a surprisngly obvious solution... Thanks to this answer, I was able to figure out that if I just set a fixed height on the sticky element, but let the contents of that element shrink, the issue goes away.

Essentially:

<div class="sticky-block" style="height:140px;">
    <div class="header-block">
        ...
    </div>
    <div class="navigation-block">
        ...
    </div>
</div>

Solution 2:[2]

In my case these solutions didn't work, Chrome on Android still had the flickering issue. My solution was to make my header position fixed and have a dummy div behind it that resizes to be the same height as the header.

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        :root {
            --lightGrey: #bbbbbb;
        }

        body {
            margin: 0;
            width: 100%;
            height: 500%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(9, auto);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
        }

        header {
            width: 100%;
            grid-area: 1 / 1 / 1 / 4;
            position: fixed;
            top: 0;
            z-index: 100;
            background-color: var(--lightGrey);
        }

        .headerBackground {
            grid-area: 1 / 1 / 1 / 4;
            background-color: var(--lightGrey);
            height: fit-content;
        }
    </style>
</head>

<body>
    <header>My Header</header>
    <div class="headerBackground">Background div</div>
</body>

<script>
    // Changes the header once you have scrolled down by 100 pixels or more
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 100) {
            $('header').css('height', '20vw');
            $('header').css({ 'font-size': '4vw', 'padding': '5vw' });
        } else if ($(window).scrollTop() == 0) {
            $('header').attr('style', '');
        }
    });

    // This keeps the space behind the header at the same height as the header to get around the flickering sticky 
    $(".headerBackground").css({ 'height': ($("header").height() + 'px') });
</script>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 JacobTheDev
Solution 2 Loïc Joachim

Related Questions