Почему трансформирование разбивает размеры элемента с положением: фиксировано?

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 pseudo не будет отображаться, хотя при применении к элементу класса .box--to-right применяется элемент псевдонима :after с 1 непрозрачностью!

Так почему это? Разве это не все нормально?

И для достижения так или иначе подобного эффекта, я знаю, что я могу анимировать left вместо использования преобразования перевода, но мне интересно, почему что-то подобное должно произойти?

Answer 1

Такое поведение, как представляется, в соответствии с спецификацией:

6 The Transform Rendering Model

Для элементов, расположение определяется с помощью модели Бокса CSS, любое значение кроме none для преобразования результатов в создание как контекста стека , так и содержащего блока. Объект действует как , содержащий блок для фиксированных потомков.

Другими словами, как только вы применить преобразование к элементу (как вы сделали .box), любые фиксированные позиционируемых потомков (например, ваш псевдо-элемент), начинают использовать преобразованный элемент как содержащий блок, не видовой экран.