修复了Firefox浏览器中粘性家长闪烁的子元素

Question

我正在尝试创建一个包含一个项的position: sticky;和position: fixed;的头，以及不包含position: fixed;的第二个项。

以下是实现：Codepen

问题是：当我在Chrome中打开这个Codepen时，一切都很顺利，但当我在Firefox中尝试这个代码时，会有一个奇怪的闪烁。你可以自己尝试，只需上下滚动即可。

以防万一，这里是视频：Youtube链接

以下是我尝试过的解决方案：

• header类上的transform: translateZ(0);对我不起作用，因为header__item停止移动
• 嵌套的position: sticky;我可以在header__item上使用position: sticky而不是position: fixed;，但此解决方案在Safari浏览器中不起作用

我想要的是：删除你可以在视频中观看的闪烁。

Firefox版本：80.0.1 64位

操作系统：Ubuntu 18.04.5 LTS

注意：这个错误有时可能不会在Windows上重现(我不知道为什么(，但总是会在Ubuntu或macOS操作系统上重现。对于我的Windows电脑上的Firefox 80.0.1，一切都很好。

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: skyblue;
height: 300vh;
}
.header {
width: 100%;
height: 250px;
background: green;
position: sticky;
top: -80px;
}
.header__item {
height: 150px;
width: 100px;
background: tomato;
position: fixed;
top: 0;
}
.header__second-item {
height: 80px;
width: 100px;
background: purple;
margin-left: auto;
}

<header class="header">
<div class="header__item"></div>
<div class="header__second-item"></div>
</header>

Answer 1

要开始，请尝试将position: fixed;元素替换为position: sticky;在Firefox中，它将被修复，但Safari不支持具有粘性位置的子元素。我看到的唯一方法是检测浏览器并根据浏览器替换位置。例如：

.header__item {
position: fixed;
}
@-moz-document url-prefix() {
.header__item {
position: sticky;
}
}