html - 固定子元素在 Firefox 浏览器中闪烁

Question

我正在尝试使用 position: sticky; 创建一个标题和 position: fixed;其中一项和第二项没有 position: fixed; .
这是实现:Codepen
问题:当我在 Chrome 中打开这个 Codepen 时，一切都很顺利，但是当我在 Firefox 中尝试这个代码时，有一个奇怪的闪烁。您可以自己尝试，只需向下和向上滚动即可。
以防万一，这里是视频:Youtube link
以下是我尝试过的解决方案:

transform: translateZ(0);在 header class 对我不起作用，因为 header__item停止移动。

嵌套 position: sticky;我可以用 position: sticky在 header__item而不是 position: fixed;但此解决方案在 Safari 浏览器中不起作用。

我想要的是:删除您可以在视频上观看的闪烁。
火狐版: 80.0.1 64 位
操作系统: Ubuntu 18.04.5 LTS
注意:这个错误有时可能不会在 Windows 上重现(我不知道为什么)，但总是在 Ubuntu 或 macOS 操作系统上重现。对于装有 Windows 的 PC 上的 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;
  }
}