Keep overflow: скрытое поведение после изменения воли: трансформация

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

.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 ответ

Решение

Из спецификации:

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

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

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

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

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

Другие вопросы по тегам