CSS `Filter: Blur()` не работает должным образом в Safari ⇐ CSS

[Anonymous]

Начал работать с фильтром: размытие() в проекте и заметил, что он не очень хорошо работает с Safari.
Вместо размытия расширяется внешне, как и в других браузерах, в Safari кажется, что для переполнения установлено значение скрытое, но это не так. Иногда работает, а иногда полностью ломается. Я также заметил, что ошибка становится более «агрессивной», когда в фильтре есть переход. В любом случае, вот сравнение с работой (в Chrome) и не работой (в Safari). Кроме того, вот код с копией этой ошибки (правда, она видна только в Safari).
Как всегда, заранее спасибо за помощь. И если вы хотите просмотреть код, не заходя в codepen, вот он:
Код:

Код: Выделить всё

body {
height: 100vh;
background: #272727;
display: flex;
align-items: center;
justify-content: center;
color: black;
font-family: Gill Sans;
}

.content-div {
width: 30rem;
height: 30rem;
background: white;
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
}

.title {
font-size: 1.4rem;
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
}

.filter {
font-size: 1.5rem;
height: 90%;
width: 93%;
background: red;
/* FILTER TRANSITION */
transition: filter .2s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 1rem;
left: 1rem;
z-index: 1;
}

/* FILTER */

.filter:hover {
filter: blur(3.3rem);
}

Код: Выделить всё

Lorem Ipsum


HOVER OVER ME

OBS: по какой-то причине уценка CSS не работает, извините за это .

Подробнее здесь: https://stackoverflow.com/questions/701 ... -on-safari