CSS `Filter: blur ()` Не работает должным образом на сафари ⇐ Html

[Anonymous]

начал работать с фильтром: blur () над проектом и заметил, что он не очень хорошо работает с Safari. Иногда это работает и иногда ломается полностью. Я также заметил, что ошибка становится более «агрессивной», когда фильтр имеет переход. Во всяком случае, вот сравнение и работы (на хроме) и не работать (на сафари). Кроме того, вот код из реплики этой ошибки (хотя он виден только на Safari). < /P>
Как всегда, спасибо за вашу помощь заранее. ND В случае, если вам нужен предварительный просмотр кода, не перейдя в CodePen, вот он: < /p>
код: < /p>


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);
}< /code>

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

Lorem Ipsum


HOVER OVER ME

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

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