Столкнулся с проблемой. Я хотел сделать прилипающую шапку с blur-эффектом, внутри которой расположена навигация. На мобильниках, эта навигация, естественно, должна превращаться в мобильное меню и иметь position: fixed, чтобы выезжать сбоку. Но, как оказалось, backdrop-filter ломает position: fixed для всех элементов внутри.
Вот почему это происходит:
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.
(c) https://drafts.fxtf.org/filter-effects/#FilterProperty
Решение:
Не использовать backdrop-filter на шапке вообще. Вместо этого, мы делаем шапке position: relative, внутрь добавляем блок с position: absolute, растягиваем его на полную ширину и высоту и применяем backdrop-filter уже к нему.