Почему при добавлении обертке свойства filter уходит вверх фиксированный header (внутри пример на codepen)?

Question

[wqertAnna]

У меня есть элемент с классом .wrap, который содержит в себе 3 элемента

.header
.content
.footer

реализован плавающий header и всё работает нормально, но если добавить элементу .wrap свойство filter, то .header уходит вверх.
Это видно, если после добавление свойства filter набрать в консоле
console.log($('.header').offset().top)
Вот сам пример: https://codepen.io/anon/pen/ZdpoVa

Для удобства внизу страницы реализован checkbox, которые добавляет и удаляет свойство filter у .wrap. Больше он ничего не делает.

И что важно, как это исправить, если мне необходимо оставить свойство filter и я никуда от этого не могу деться?

Answer 1

[ⓒⓢⓢ]

Попробуйте воспользоваться position: sticky; для блока ".header.header--fix"
Ещё как вариант, замените селектор ".wrap--filter" на ".wrap--filter > *", чтобы фильтр применялся только к дочерним элементам. Фильтр и в вашем варианте применяется к дочерним, но лишь с той разницей, что блок .wrap--filter останется без фильтра

Из-за чего так происходит, можете прочитать в гугле, довольно давний вопрос. Из вашего вопроса мне показалось, что вы сами себе вырыли яму, а теперь пытаетесь из неё выбраться

Comments

[wqertAnna]

Спасибо

Я искала ответ почему так происходит в сети, но не нашла, поэтому если Вы встретите его, буду благодарна за ссылку.
Хочется именно понять причину этого эффекта.

Для себя выбрала вариант с заменой селектора

&--filter > * {
		filter: grayscale(80%);
}

[ⓒⓢⓢ]

wqertAnna, Можете из документации почитать https://drafts.fxtf.org/filter-effects/#FilterProperty

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.