Фоновый фильтр не работает для вложенных элементов в Chrome ⇐ CSS

[Anonymous]

У меня есть div.outer и внутри div.inner, оба с позицией: Absolute; и backdrop-filter: Blur(8px);.< /p>

https://jsbin.com/nihakiqocu/1/edit?html,css,output

Safari ( left) дает желаемый результат — оба элемента div размывают то, что находится за ними.

Однако Chrome (справа) применяет размытие только к div.outer:< /p>






У меня есть решение: добавить еще один div внутри div.outer и переместить фон -filter: Blur(8px); в этот новый div.

Однако я был бы признателен за решение, которое не требует изменения DOM с самого начала jsbin. Кроме того, кто-нибудь знает, что является причиной этого – это ошибка Chrome?

https://jsbin.com/rasudijame/1/edit?html,css,output

PS: он работает в Chrome iOS, но не работает в Chrome Android, а также не работает в Chrome Mac OS

Подробнее здесь: https://stackoverflow.com/questions/609 ... -in-chrome