CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromesticky
Andreas Richter
Andreas Richter

Reputation: 788

Header with position:sticky is flickering in chrome when shrinking

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?

Upvotes: 1

Views: 2081

Answers (1)

fdfdfd
fdfdfd

Reputation: 501

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;
}

Upvotes: 1

Related Questions