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