vanilla-tilt.js icon indicating copy to clipboard operation
vanilla-tilt.js copied to clipboard

Published 20 hours ago • verified publisher icon micku7zu

Parallax effect not working with backdrop filter

Open varlevi opened this issue 4 years ago • 3 comments

Hi! Great project you have here. I've loved using it, but have one problem. I set up the parallax effect as instructed by the demo page (I also made the effect more dramatic by increasing the translateZ value). for a while, everything worked fine, but then I added a backdrop-filter: blur(); effect on the container element and the inner element no longer sticks out like before. any idea why this is happening?

varlevi avatar Apr 25 '20 21:04 varlevi

I am facing the same issue, have you come up with any workaround? @varlevi

manasmdg3 avatar Dec 29 '20 17:12 manasmdg3

Unfortunately, I have not. I ended up just using a transparent background with no blur. Sorry I couldn't be of more help!

varlevi avatar Dec 29 '20 22:12 varlevi

CSS filters and 3D do not seem to play nice: https://css-tricks.com/things-watch-working-css-3d/

A possible workaround could be to stack two elements on top of each other. One for the background with the filter, and one for the content with stacking. But this is not easy if you don't have elements with exact widths and heights.

pieter-biesemans avatar Jan 04 '21 14:01 pieter-biesemans