滚动时粘性元素闪烁（已激活Chrome设备工具栏）

Question

我遇到一个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;

}