Как исправить баг CSS (transform + pos: fixed)?

Question

[bozuriciyu]

Есть ли вообще решение этой проблемы?

.focking-transform { transform: translate3d(0,0,0); }
.focking-transform .bug { position: fixed; top: 50%; left: 50%; }

Как позиционировать относительно вьюпорта в таких ситуациях когда к родителю применен подобный трансформ?

Для неопытных разработчиков, никогда с таким не сталкивавшихся прилагаю пример - https://codesandbox.io/s/nostalgic-montalcini-rm927

Comments

[Ankhena]

position: fixed позиционирует относительно вьюпорта. Значит родитель ему даром не нужен.

[bozuriciyu]

Ankhena, не позиционирует, если транслейт у родителя.

[Ankhena]

bozuriciyu, именно так
Надо-то что?

[bozuriciyu]

Ankhena, чем не понятен вопрос? Там же все написано!

[Ankhena]

bozuriciyu, ну ок, живите со своим вопросом

[bozuriciyu]

Ankhena, позорище. Снимите статус Куратор тега с этоого человека. Сделал тебе пример, на смотри - https://codesandbox.io/s/nostalgic-montalcini-rm927

Так понятнее? Что-то еще разжевать? Рецепт борща может?

[bozuriciyu]

Для других таких кто вообще не отбивает что тут происходит - вот предыстория. Пост 2011 года meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fi...

Вопрос - изменилось ли что-то в 2020 и как такое решать сейчас? Ведь это совершенно ненормальное и неожиданное поведение. Страшно предствить что надо костылить чтобы решать реальные ситуации с таким дерьмом.

[Ankhena]

bozuriciyu, да выньте вы его из родителя, чего орете-то

[bozuriciyu]

Ankhena, гениальный совет! Спасибо огромное, а то бы я не догадался!

[Ankhena]

bozuriciyu, возьмите себя в руки.
О чем вы можете догадаться, а о чем нет, я без понятия.
И в том, что браузеры так себя ведут виновата не я.

Теперь постарайтесь понять:

Из вашего вопроса вообще никак не следовало, что вы вообще об этом что-то читали.
Я вам написала, что нужно вынуть из родителя (это самое простое, что можно придумать), потому что для fixed'а родитель обычно не нужен.
Не соизволив понять фразу, вы снова тычите в вопрос, не уточняя, зачем вам там родитель и делаете никому не нужный пример. А уточняла я потому что иногда бывают задачи, когда родитель нужен для каких-нибудь волшебных наследований и тому подобных трюков. Поэтому хотелось видеть задачу целиком, чтобы можно было придумать оптимальное решение.

Насколько мне известно, с той статьи ничего не изменилось.

Ведь это совершенно ненормальное и неожиданное поведение.

Это спорный вопрос, статей полно и споров полно. Повторять не целесообразно.

[Rustam Bainazarov]

bozuriciyu, бан захотели? Судя по названиям классов, это у вас такой стиль общения, мда.

Ну а вообще, это не баг, это особенность спецификации:
https://stackoverflow.com/questions/15194313/trans...

Transform создает новый контекст с новой системой координат, поэтому наследники не принимают координаты от viewport. Нормального решения или обхода данной особенности на CSS нет.

Можете только костылём «эмулировать» координаты viewport с помощью установки размеров родителя по высоте и ширине viewport. Вот так:
https://codesandbox.io/s/dank-sound-b7rbv

Вот только фиксированность элемента это всё равно не восстановит.