Question

我正在尝试创建一个标头，其中一个项目的position: sticky;和position: fixed;以及另一个没有position: fixed;的项目。

以下是实现：Codepen

问题：当我在Chrome中打开此Codepen时，一切进展顺利，但是当我在Firefox中尝试此代码时，会出现奇怪的闪烁。您可以自己尝试，只需上下滚动即可。

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

这是我尝试过的解决方案：

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

我想要的是：删除可在视频上观看的闪烁按钮。

Firefox版本： 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;
  }
}

修复了粘滞父项在Firefox浏览器中闪烁的子元素

1 个答案: