Yesterday while I was doing the pomodoro clock I found a strange problem with 3d and css in Firefox, I’m new to this so I’m not sure if I’m doing something wrong.
I reduced the problem to a simple test case here: https://codepen.io/Sanguium/pen/PKYRjz
There’s a rotated
div with a hover effect inside another
div with perspective for the 3d effect.
When there’s just one nesting all works fine, hover works when it should (green
However, if I add another
div between the main container and the rotated
div, (wich must be set to
transform-style: preserve-3d to keep the 3d effect) the hover feature on the inner
div starts acting up, it will only work past a certain point, just try to hover starting from the right side, it won’t detect it until mid div or so.
On Chrome 59.0 it works fine but in Firefox 54.0.1 it works as described, is this a bug or am I missing something?