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

Question

I think I asked my question clearly. So imagine this:

.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>

See? The fixed position :after pseudo won't be shown although when .box--to-right class is applied to the element, then the :after pseudo element gets visible with 1 opacity!

So why is that? Shouldn't it work all fine?

And to achieve somehow the similar effect, I know that I can animate left instead of using translate transform, but I'm wondering why something like this should happen?

Answer 1

This behavior appears to be in conformance with the spec:

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.

In other words, once you apply transform to an element (as you have done to .box), any fixed positioned descendants (like your pseudo-element), start using the transformed element as the containing block, not the viewport.