Пропадает фоновое размытие при наведении на карточку tilt.js, что делать?

Question

[Mihaillzz]

Вот сайт project4390863.tilda.ws

Крч поставил css фильтр на фоновое размытие карточки и докинул туда анимацию tilt.js , размытие работает, пока не наводишь мышку на карточку, делал всё на тильде, код не получится предоставить, использовал стандартный tilt js на jquery

!!! Важно, если отключить tilt js, то размытие при наведении не пропадает, вот класс прямоугольника на котором наложен эффект размытия (.cardx) в скрине прикрепил


так как всё на тильде сделано, только вариант через дев тулс посмотреть на сайте, если поможете, буду ОЧЕНЬ благодарен

Comments

[Konfy]

У меня вообще нет никакого размытия, Chrome

[Mihaillzz]

зашел с хрома только что , размытие есть, если не наводить на карточку

[Mark Lansky]

Mihaillzz, браузеры бывают разные. Скорее всего у автора комментария браузер не такой свежий, как у вас. Если собираетесь использовать данный блюр, то ожидайте, что много у кого он не будет работать в принципе (без наведения тоже)

Answer 1

[Mark Lansky]

Ни разу не пользовался тильдой, но на предоставленном примере для размытия используется "backdrop-filter: blur()". Этот css не поддерживается в некоторых браузерах.. штука баганая, если не изменяет память сам репортил багу в хромиум. В общем лучше не надеяться на это свойство, оно очень ненадёжное, фильтр очень часто ломается, проблема не в вашей анимации.

mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/b...
caniuse: https://caniuse.com/css-backdrop-filter

UPD: вижу только два варианта решения проблемы:
1. Убрать анимацию поворота карточки при наведении на неё, оставить блюр.
2. Убрать блюр, оставить анимацию поворота.
Вряд-ли получится добиться желаемого результата с таким набором (а если и получится, будет работать мало где)

Comments

[Mihaillzz]

ну насчет размытия, штука популярная, в основном в интерфейсах всяких, но и веб дизайне тоже, её довольно часто можно встретить сейчас, с ней никогда багов не было и все современные браузеры поддерживают её, я так понял проблема какая-то именно с тильт js , может быть попробовать использовать не jquery версию, а javascript?

[Mark Lansky]

Mihaillzz, вы не правы. Данный способ размытия сейчас не поддерживатеся в браузерах firefox (спрятан за флагом) и safari (в том числе и мобильном, работает лишь через префикс -webkit-). В остальных браузерах данное свойство может работать нестабильно (так и есть).

[Mark Lansky]

Mihaillzz, я вам объяснил в чём проблема, вполне можете засчитывать как решение) Можете перечитать комментарий. В нынешних реалиях вы либо убираете анимацию, либо блюр. Предлагаю убрать блюр, так как в браузере которым я пользуюсь — firefox, этот способ до сих пор не поддерживается, так же и не будет работать в браузерах safari. Ждите, свойство сырое)

[Mihaillzz]

Я отметил решением ваш ответ , но по факту ответа нет) те варианты решения я уже прописывал в описании, я уже пробовал отключать анимацию и всё работало

[Mihaillzz]

ZerdoX-x, а вопрос заключался в том, чтобы заставить работать и анимацию и блюр