位置的堆叠上下文：固定伪元素

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 中触发堆栈上下文的情况下工作。

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

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

Answer 1

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

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

根据The will-change property，

如果属性的任何非初始值会导致元素 为固定位置元素生成一个包含块，指定 will-change 中的该属性必须使元素生成 固定位置元素的包含块。

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

除none 之外的任何值都将导致创建 堆栈上下文和包含块。该对象充当 固定定位后代的包含块。

我认为 Safari 不需要will-change: transform，因为它认为固定元素应该为固定后代创建一个包含块，即使这不是标准的。这并不奇怪，因为在 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>