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

Question

我正在尝试创建一个标题，position: sticky;其中position: fixed;包含一个项目，第二个项目没有position: fixed;.

这是实现：Codepen

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

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

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

• transform: translateZ(0);在header课堂上对我不起作用，因为header__item停止移动。
• 嵌套position: sticky;我可以使用position: stickyonheader__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

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

.header__item {
  position: fixed;
}

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