Keep overflow: скрытое поведение после изменения воли: трансформация - PullRequest
0 голосов
/ 08 декабря 2018

У меня есть родительский и дочерний элементы:

.parent {
  will-change: transform;
  overflow: hidden;
  position: absolute;
}

.child {
  position: fixed;
  top: 80px;
  left: 80px;
}

без стиля will-change:transform, элемент .child независимо от позиции родителя и overflow:hidden будет располагаться на основе окна.
Теперьчто .parent имеет этот стиль, не только top и left из .child вычисляются из .parent, но также overflow:hidden применяется и к .child.
Похоже, что position:fixed будетбыть полностью проигнорированным, если мы добавим will-change:transform
Взгляните сюда: https://jsbin.com/beluweroti/1/edit?html,css,output

Примечание: Я не добавляю этот стиль в .parent, поэтомуЯ не могу просто удалить его.

Я могу справиться с позиционированием и установить правильные left и top, но вопрос в том,
как я могу игнорировать overflow:hidden для детей с фиксированным положением?

1 Ответ

0 голосов
/ 08 декабря 2018

С спецификацией :

Если любое не начальное значение свойства приведет к тому, что элемент сгенерирует содержащий блок для элементов с фиксированным позиционированием , указав, что свойство в will-change должно заставить элемент генерировать содержащий блок для элементов с фиксированным позиционированием

Таким образом, в основном вы сталкиваетесь с проблемой преобразования, а не will-change, потому что:

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

Таким образом, transform создает содержащий блок для элемента с фиксированной позицией, и will-change должен делать то же самое, и поскольку .parent теперь является блоком с фиксированным элементом, он также будет применять к нему свое переполнение.

Обычно вы ничего не можете сделать, если не можете удалить свойство will-change или изменить его значение с .parent

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...