Header with position:sticky is flickering in chrome when shrinking

Question

I have a navigation element , below some other content, that I should be fixed , as soon as the scroll height is reached. This is achieved with position:sticky and works fine in all browsers. But I also want to shrink that element as soon as it is fixed.

https://codepen.io/arichter83/pen/xMLyOJ

If scrolled slowly at Chrome (71.0.3578.98 64-bit Mac) this header flickers, because if the element is shrinking, the window.scrollY of the page is reduced, which makes the element become larger again... back and forth. (use "start" to see the behavior)

Any workaround for this?

• Wrapping in fixed height: this would stop the content below to move upwards, which I want.

Answer 1

Adding a position property to your header.minified ID seems to have stopped the flickering.

 #header.minified {
        font-size: 24px;
        line-height: 48px;
        height: 48px;
        background: #efc47D;
        text-align: left;
        padding-left: 20px;
        position: fixed;

 }