Объясните как работает position: fixed; когда используется transform?

Question

[RomanSS]

Не могу понять, как работает position fixed. По документации он прикрепляет слой к окну браузера, но если использовать transform, то уже работа меняется, и он прикрепляется уже к слою, а не к окну браузера (поведение становится как у position: absolute, но по ряду фактов это все же fixed).
Знаю, что в момент использования transform: translateZ(0); слой переходит в другой режим стекирования, это связано скорее всего с этим, кто может объяснить это поведение?

Пример https://codepen.io/anon/pen/LdWmJw

Код

<style>
.parent {
 
  width: 30%;
  background: blue;
  height: 2500px;
  float: left;
}
.child {
  position: fixed;
  width: 50px;
  height: 50px;
   top: 30px;
  left: 50px;
  background: red;
}


.parent2 {
  width: 30%;
  background: green;
  height: 2500px;
  transform: translateZ(0);
  float: left;
}
.child2 {
  position: fixed;
  top: 30px;
  right: 50px;
  width: 50px;
  height: 50px;
  background: red;
}
</style>

<div class="parent">
  <div class="child"></div>
</div>

<div class="parent2">
  <div class="child2"></div>
</div>

Answer 1

[Ivan Bogachev]

кто может объяснить это поведение?

Спецификация может объяснить:

For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants.

Добавили элементу transform - все его потомки с position:fixed начинают отсчитывать свое расположение от него. Они начинают считать его своим "внешним блоком", а не вьюпорт или страницу, как это происходит по умолчанию для position:fixed.

Comments

[RomanSS]

Ну раз слой становится "внешним блоком", почему если в ней есть прокрутка, и прокручиваешь содержимое, оно не зафиксировано, а вместе с прокруткой уходит? Пример: https://codepen.io/anon/pen/rdyrQz
Хочу просто детальней разобраться, но пока полное поведение все равно не пойму.

[Ivan Bogachev]

RomanSS,

почему если в ней есть прокрутка, и прокручиваешь содержимое, оно не зафиксировано, а вместе с прокруткой уходит?

Вопрос: а какое поведение вы там ожидали увидеть? Если ожидали, что элемент не будет двигаться - вам стоит перечитать спецификацию в разделе про overflow.

[RomanSS]

Ivan Bogachev, ну по логике вещей я там ожидаю, что < div class="child2" > будет стоять на месте и не двигаться, во время прокрутки.

Answer 2

[Blissful]

Можно как-нибудь изменить это поведение? Чтобы fixed рассчитывался от viewport, не смотря на transform родителя?