Блог

У меня проблема с position: sticky элементом, который мерцает всякий раз, когда я прокручиваю страницу в Google Chrome с помощью панели инструментов устройства и имитирую разные устройства. Однако, когда я не использую панель инструментов устройства, элемент работает так, как должен. Он также отлично смотрится в Safari и Firefox. Я видел пару обходных путей с использованием -webkit-transform: translate3d(0,0,0); и backface-visibility: hidden; , но, похоже, я не могу заставить его работать. Я использую его внутри Next.js проект.

Кто-нибудь испытывал то же самое?

Это CSS для липкого элемента:

 .StateTitle {
position: sticky;
top: 0;
padding-top: 45px;
z-index: 50;
width: 100%;
padding-bottom: 1px; 
background-color: #FF7E7E; 
  

}

И это CSS для родительского элемента:

 .StateWrapper {
margin-top: 0;
width: 100%;
box-sizing: border-box;
position: relative;
  

}