i'm working on a new homepage project, which uses a lot of backdrop blurring and the pages are quiet long. So i divided all the sections to child components which have some child components as well. The problem is, that if i use backdrop-filter:blur(20px) on a child component, it won't blur any parent components content. I already tried to define the component host as display:block which sometimes solves the problem and noticed, that blur works if i use it on the :host attribute, but not if i use it on the elements inside that component. Does somebody know the reason for that or a workaround?
Just noticed: The bug doesn't appear on safari just on Chrome (Chrome 105).