css - 位置 : fixed pseudo-elements 的堆栈上下文

Question

我正在尝试通过 this post from Four Kitchens 中描述的代码实现固定背景图像，但有多个背景图像，而不仅仅是一个。这是帖子中的代码:

.what-we-do-cards {
  @include clearfix;
  border-top: 10px solid rgba(255, 255, 255, .46);
  color: $white;
  padding-bottom: 4em;
  overflow: hidden; // added for pseudo-element
  position: relative; // added for pseudo-element

  // Fixed-position background image
  &::before {
    content: ' ';
    position: fixed; // instead of background-attachment
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    background: url('/img/front/strategy.jpg') no-repeat center center;
    background-size: cover;
    will-change: transform; // creates a new paint layer
    z-index: -1;
  }
}

基本思想是使用 :before 伪元素为固定位置背景图像创建内容部分，除了帖子中链接的示例仅使用单个固定位置部分。

我有故障排除jsfiddle这适用于 Safari 和 Chrome，但不适用于 Firefox，我试图弄清楚浏览器如何以不同方式处理伪元素。此外，如果您在 Chrome 中注释掉 will-change: transform;(第 25 行)，您将看到与 Firefox 相同的行为，我认为这是由于 Chrome triggering a stacking context 造成的。 .我不确定为什么 Safari 在没有在 Chrome 中触发的堆栈上下文的情况下工作。

关于堆叠上下文有一个很好的 SO 答案 here ，但我不确定它如何处理固定位置元素、伪元素和显式设置 z-index。

编辑:最初的 jsfiddle 显示了如何跨浏览器创建(或不创建)固定元素的包含框，但并未真正显示背景图像如何变化。 @Oriol 解释了如何添加 transform: rotate(0); 强制在 Firefox 上创建一个包含框，但它也删除了 Chrome 中的 fixed-in-relation-to-the-viewport 效果。我创建了一个 new jsfiddle - 是什么导致了渲染差异？

Answer 1

确实 will-change: transform 产生了一个堆叠上下文。但是，堆叠上下文与此问题无关。事实上，CSS 工作组最近 resolved position: fixed 已经创建了一个堆叠上下文。

相反，这是由于为固定位置元素创建了一个包含 block 。

根据 The will-change property ,

If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.

因此，will-change: transform 为固定位置元素生成一个包含 block ，因为根据 The Transform Rendering Model ,

Any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

我认为 Safari 不需要 will-change: transform 因为它认为固定元素应该为固定后代创建一个包含 block ，即使这不是标准的。这并不奇怪，因为在 CSSWG 决定这样做之前，固定元素会在 Webkit 浏览器上产生堆栈上下文。

Firefox 支持will-change，但它还没有实现这个行为。但是，您可以通过将 transform 设置为 none 以外的任何值来实现相同的结果，例如

.fixed { transform: rotate(0); }

body { margin: 0; }
.fixed {
  height: 20vh;
  transform: rotate(0); /* Containing block for fixed elements */
}
.fixed:before {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.one:before { background: orange; }
.two:before { background: blue; }
.three:before { background: black; }
.four:before { background: gray; }
.five:before { background: purple; }

<div class="container">
  <div class="one fixed"></div>
  <div class="two fixed"></div>
  <div class="three fixed"></div>
  <div class="four fixed"></div>
  <div class="five fixed"></div>
</div>