Почему ломается «position: fixed», если у родителя задан «transform-style: preserve-3d»?

Question

[Павел]

Если у родителя стоит transform-style: preserve-3d, а у потомка position: fixed, то координаты последнего привязываются к родителю, а не к окну браузера. Такое поведение наблюдается в Chrome, Firefox, Edge. В IE11 preserve-3d не влияет на позиционирование. Кто знает, это баг или фича?

Демонстрация: https://codepen.io/anon/pen/YVMZve

Comments

[Полина Емельянова]

Уберите у родителя маргины - удивитесь.

Вы задаете новую систему (3д) координат, отводите ее на 150пикс от края браузера и удивляетесь? Эм.... )))))

[Павел]

Полина Емельянова: Вопрос был:

это баг или фича?

Ну вот выяснили, что фича. Я не знал, что transform-style: preserve-3d задает новую систему координат для дочерних элементов. Спасибо за хоть какой-то ответ, но кроме снобизма, могли бы и ссылочку на источник приложить, где об этом упоминается.

[Полина Емельянова]

Павел:
Пошукайте тут
https://www.w3schools.com/cssref/css3_pr_transform...
https://developer.mozilla.org/ru/docs/Web/CSS/tran...
https://html5book.ru/3d-transform/
https://habrahabr.ru/post/151300/
https://css-tricks.com/almanac/properties/t/transf...

И нам, двумерным, по умолчанию, существам-верстальщикам "до 3D" эры, придется здорово поломать мЫшленье, чтобы врубиться и начать видеть мир во всем его объеме)))

Просто постойте пресловутый кубик сами, ручками, и будет вам пониманье.)

[Павел]

Спасибо за ссылки.

Но близко к теме только на MDN есть маленькая фраза, которую я читал и раньше:

Свойство transform-style CSS определяет положение дочернего элемента в 3D-пространстве или в той же плоскости, что и родительский элемент.

Но из этого определения ни разу не ясно, что в MDN понимают под 3D-пространством. Ну вот с вашей помощью разобрались, что оказывается имеется в виду новый изолированный контекст, где даже фиксированное позиционирование привязывается НЕ к окну браузера, а к системе координат этого контекста. Спасибо.