Заголовок с положением: при усадке мерцает липкий хром

Question

У меня есть элемент навигации , ниже некоторого другого содержимого, что я должен быть fixed, как только будет достигнута высота прокрутки.Это достигается с position:sticky и отлично работает во всех браузерах.Но я также хочу уменьшить этот элемент, как только он будет зафиксирован.

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

Если прокручивается медленно при Chrome (71.0.3578.98 64-битный Mac) этот заголовок мерцает, потому что, если элемент сжимается, window.scrollY страницы уменьшается, что заставляет элемент снова становиться больше ... назади вперед.(используйте «start», чтобы увидеть поведение)

Есть ли обходной путь для этого?

• Обтекание на фиксированной высоте: это остановит содержимое ниже, чтобы двигаться вверх, что я хочу.

Answer 1

Добавление свойства position к вашему header.minified ID, кажется, остановило мерцание.

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

 }