为什么 transform 会破坏具有 position:fixed 的元素的维度？

Question

我想我问清楚了。想象一下：

.box {
  width: 100%;
  height: 200px;
  overflow: auto;
  background: red;
  transition: transform .3s cubic-bezier(.09, .68, 0, .99);
}
.box:after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all .3s;
}
.box--to-right {
  transform: translateX(300px);
}
.box--to-right:after {
  opacity: 1;
  visibility: visible;
}

<div class="box box--to-right">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

看到了吗？固定位置 :after 伪元素不会显示，尽管当 .box--to-right class 应用于元素时，:after 伪元素以 1 不透明度变得可见！

那是为什么呢？它不应该一切正常吗？

为了以某种方式实现类似的效果，我知道我可以制作动画 left 而不是使用平移变换，但我想知道为什么会发生这样的事情？

Answer 1

此行为似乎符合规范：

6 The Transform Rendering Model

For elements whose layout is governed by the CSS box 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.

换句话说，一旦你对一个元素应用了转换（就像你对 .box 所做的那样），任何固定位置的后代（比如你的伪元素），开始使用转换后的元素作为包含块，而不是视口。

为什么 transform 会破坏具有 position:fixed 的元素的维度？

Why does transform break the dimensions of an element with position:fixed?

html

css

pseudo-element

css-transitions