Вёрстка. Firefox игнорирует position:fixed если у родителя есть blur. Что делать?

Question

[Антон Жуков]

Codepen
codepen.io/MrCheater/pen/BzQymN

Вся суть проблемы
HTML

<div class="firefox-gavno">
  <div class="test-firefox">Firefox gavno. Fixed block Bottom 30%</div>
</div>
<div class="test">Fixed block Bottom 30%</div>

CSS

body {
  padding:10px;
}

.test {
    position: fixed;
    bottom: 30%;
    background: red;
}

.test-firefox {
    position: fixed;
    bottom: 30%;
    left: 300px;
    background: green;
}

.firefox-gavno{
    filter:blur(0px);
}

Comments

[Lynn «Кофеман»]

stackoverflow.com/a/35819061/1016033

[Антон Жуков]

Добавил это, и не помогло:

.test-firefox:after {
content: ' ';
position: absolute;
}

Answer 1

[metaf]

Ну вообще-то у firefox как раз правильное, почитайте документацию (вы, кстати, в курсе, что это только черновик?)
https://www.w3.org/TR/filter-effects-1/#placement

This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.

Так же работает transform. Человеческим языком проблема описана здесь: meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fi...

Comments

[Антон Жуков]

Есть ли способ пофиксить поведение до того, которое мне нужно?

[metaf]

Антон Жуков: Только ампутация - отказаться от filter или сделать его соседним. И да, мне тоже кажется такое поведение нелогичным и ограничивающим, но что поделать :(

[Антон Жуков]

Грустно :-(