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クラスが要素に適用されると、:after疑似要素が1不透明で表示されます。

これはなぜですか？それはすべてうまくいくはずはありませんか？

何とか同様の効果を得るには、translate transformを使用する代わりにleftをアニメーション化できることを知っていますが、なぜこのようなことが起こるのだろうと思いますか？

Answer 1

この動作が仕様に適合したように表示されます、レイアウトCSSボックスモデルによって支配されている要素については

6 The Transform Rendering Model

で変換結果を得るためにnone以外の値 スタッキングコンテキストと包含ブロックの両方を作成します。このオブジェクトは固定配置された子孫のブロックを含む として機能します。

つまり

、あなたが含むブロックとして変換要素の使用を開始し、要素（あなたが.boxに行ったように）、（あなたの擬似要素のような）任意の固定位置子孫に変換を適用すると、いませんビューポート。