Почему Tilt.js сбрасывает свойство mix-bled-mode у внутреннего элемента?

Question

[Lkey]

Вопрос закрыт. Как удалить его тут, так и не обнаружил

Answer 1

[Юрий]

Потому что transform создаёт новый stacking context: https://bugs.chromium.org/p/chromium/issues/detail...

Можно попробовать запихнуть всё вместе с фоном в какой-то контейнер, и на этот контейнер вешать трансформ, а фон вертеть в обратную сторону, чтобы он стоял на месте. Но это безумная догадка, и я её не проверял.

Ещё можно по ховеру добавлять вашему .bill-div mix-blend-mode, всё равно пока его корёжит, не так заметно, что оверлей работает не совсем правильно. А когда курсор с него уходит — убирать mix-blend-mode, оставляя только на вложенных элементах, чтобы всё в статике выглядело идеально.

Comments

[Lkey]

Первый вариант и правда кажется безумным)

Насчёт ховера я забыл уточнить что tilt в итоге я буду делать на full screen (там есть такая опция)

Я нужного эффекта добивался на wordpress (elementor), но в elementor я думаю свой скрипт на tilt эффект, и расковырять я его не смог. А glitch я вешал такой же.

Вот собственно как должно быть illuminat.lkey.online/home2

Но от wp и elementor я отказался в итоге

[Юрий]

Lkey, тут ключевой момент в том, что mix-blend-mode будет работать только для элементов в одном контексте. С другой стороны, я не уверен, что обратный трансформ на фоне не вырвет его снова в отдельный контекст.
Короче, придумали вы себе головную боль :)

[Lkey]

Юрий, Ну раз здесь работает illuminat.lkey.online/home2 значит сделать можно )

В любом случае большое спасибо, за идеи и за ссылку.

Попробую другую связку для tilt и glitch, или придётся всё в canvas отправлять