Perspective problem - firefox bug?


#1

Hi there,

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 div)

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?

Thanks.


#2

Okay, so this is what I saw in my FireFox 54.0.1 browser. Is this what I’m supposed to be seeing? They both turn pink when I hover over them.


#3

Looks like you need to rotate and preserve parent, and also give some dimensions:

.perspective {
  perspective: 600px;
}

.hover1, .hover2, .wrapper { <---- wrapper here for dimensions
  width: 200px;
  height: 200px;
  background: green;
  transform: rotateY(50deg);
}

.hover2 {
  background: red;
  transform: rotateY(0deg); <---- no rotation for .hover2
}
.hover1:hover, .hover2:hover {
  background: pink;
}

.wrapper {
  transform: rotateY(50deg); <---- rotate parent
  transform-style: preserve-3d;
}

For some reason Chrome ignores specs and correctly guesses what you wanted to do :slight_smile:


#4

@arhillis This is what I’m seeing on firefox: https://gfycat.com/gifs/detail/MaleCavernousGalapagosalbatross

@jenovs Rotating the wrapper but not the child defeats the purpose of having the wrapper, the original idea is to have the wrapper rotate in another axis and having more than one div inside.
However as you pointed out adding the dimensions to the wrapper seems to fix the problem. I don’t understand why, but it does. Here: https://codepen.io/Sanguium/pen/oevyLE

Previously the wrapper expanded to full page width, not sure why setting a smaller width (up to ~251px in this example) fixes the problem, it is as if the wrapper stays on top and ‘obscures’ the other div.


#5

Here https://www.w3schools.com/cssref/css3_pr_transform-style.asp they say that

Note: This property must be used together with the transform property.


#6

Now I’m even more confused, I guess I have to keep testing.