Glare div blocks clicks
nth-chile opened this issue · comments
If glare
is set to true
, an overlay div js-tilt-glare
blocks click functionality of elements nested within the tilt object.
Mmh, that shouldn't be happening. Can you provide an example? On my landing page it seems to be working. http://gijsroge.github.io/tilt.js/ (click on the top left logo, it will refresh the page)
It does work when the element marked with data-tilt
itself is the link. In my case, the link buttons are nested within the data-tilt
object. Sorry I will edit my post.
I was able to fix this by adding the following line to my CSS.
.js-tilt-glare { pointer-events: none; }
I think tilt.js adds "pointer-events : none;" to the child glare element and not the parent, thus causing the issue.
cheers !
Thx Smashr!! This css code did the trick!
Hi guys, it's generally a bad idea to add links inside a tilt element. Just for usability sake. But for other cases its indeed necessary thats why I already added pointer-events to the inner glare element but I should have added it to the wrapper instead.
I'll try to change it later today.
You are welcome guys.
Yes Gijs Rogé, it would be perfect if the "pointer-events: none;" was added dynamically to the ".js-tilt-glare" element instead of ".js-tilt-glare .js-tilt-glare-inner".
Currently the "pointer-events: none;" is being added to ".js-tilt-glare .js-tilt-glare-inner" by the plugin.
Thanks !
Should be fixed guys! Thanks for reporting!
@gijsroge "it's generally a bad idea to add links inside a tilt element. Just for usability sake."
Could you elaborate on that? I'm not sure why that would be a bad thing. Just curious about your thought process. Also, is it updated in all the latest website downloads, or do I have to pull from the master?
Thanks let me know!
@tr1s What I meant was that it's not a good idea to add <a>
links or <button>
elements inside a tilt element. Example: https://codepen.io/gijs/pen/0d74a1a86ecf75e1250d3f057f3bf7da/
This is just bad UX its weird and hard to click on these items. The tilt element itself should be a link.