Переход при размытии фона-фильтра, вызывающий темные вставки (только в Chrome И Windows) ⇐ CSS

[Anonymous]

Изменить: начиная с версии Chrome: 119.0.6045.200, похоже, эта проблема решена в самом Chrome

Во время перехода с помощью backdrop-filter я заметил темную вложенную тень, видимую только во время перехода.

Похоже, это происходит только в браузерах на базе chrome/webkit в windows (10 и 11):
Моя текущая версия Chrome: «Версия 116.0.5845.190 (официальная сборка) (64-разрядная версия)»

Также кажется, что это действительно происходит в stackoverflows, встроенном в «запуск фрагмента кода»
Но нет для редактора фрагментов кода stackoverflows
В моем реальном проекте я также вижу эти вставки.

Я хотел бы избавиться от вставных границ.
Это проблема с кодом или непреднамеренным/неопределенным поведением браузера?
Примеры
Chrome с проблемой:

И с Firefox вроде всё в порядке:


Пример кода:
При нажатии этой кнопки в Chrome отобразятся черные вставки;
Хотя в редакторе фрагментов stackoverflow границы не видны.
В этом jsfiddle также можно наблюдать поведение.

function toggle() { document.getElementsByClassName("inner")[0].classList.toggle('blurred') .inner { поле: 20 пикселей; отступ: 10 пикселей; ширина: 100%; высота: 200 пикселей; отображение: встроенный блок; граница: 2 пикселя, сплошная белая; border-bottom: 2px сплошной rgba(0, 0, 0, .1); размер коробки: граница-коробка; переход: фон-фильтр 500мс; } .размытый { фоновый фильтр: размытие (5 пикселей); } .текст { позиция: абсолютная; осталось: 20%; верх: 20%; размер шрифта: 40 пикселей; белый цвет; семейство шрифтов: без засечек; поле: 20 пикселей; отступ: 10 пикселей; ширина: 100%; высота: 200 пикселей; отображение: встроенный блок; размер коробки: граница-коробка; } .контейнер { поле: 10 пикселей; дисплей: гибкий; положение: относительное; фон: линейный градиент (135 градусов, #57cdff, #05a915); переключить фоновый фильтр: размытие (5 пикселей) Привет!