Search code examples
cssperspective

CSS perspective bug under firefox

I am having issues with the css "transform" property under firefox ( latest version + other versions tested )

Here is the transform applied : 

  -moz-transform: perspective(2rem) rotateX(15deg) scaleY(1);
  -o-transform: perspective(2rem) rotateX(15deg) scaleY(1);
  -ms-transform: perspective(2rem) rotateX(15deg) scaleY(1);
  -webkit-transform: perspective(2rem) rotateX(15deg) scaleY(1);
  transform: perspective(2rem) rotateX(15deg) scaleY(1);

And the active element should have 

  -moz-transform: perspective(0rem) rotateX(15deg) scaleY(1);
  -o-transform: perspective(0rem) rotateX(15deg) scaleY(1);
  -ms-transform: perspective(0rem) rotateX(15deg) scaleY(1);
  -webkit-transform: perspective(0rem) rotateX(15deg) scaleY(1);
  transform: perspective(0rem) rotateX(15deg) scaleY(1);

Here is a JSfiddle to test under chrome, and under firefox. The "active" element does get a perspective change under chrome & others, while on firefox, it is not replaced.

JSFiddle

I searched for a similar case but it doesn't seem to have occured to someone else.

Solution

  • Looks like Firefox isn't playing nicely with setting a zero-value for the transform: perspective(n) rule. What worked for me is just removing the perspective transform from the .active rule:

    #owl-demo .owl-item.active > div{
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
}

    Jump the the Edit section, the scenario below is incorrect, but still using it as a reference later

    Additionally, I've found that the standalone perspective property does work fine with zero values. If ensuring that value is set to zero is important to you, perhaps this will suffice:

    #owl-demo .owl-item.active > div{
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -moz-perspective: 0em;
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
  perspective: 0em;
}

    Edit

    Turns out the second scenario is only "working" because it wasn't being used correctly. For reference, perspective is a property intended to provide a 3D space to apply perspective to all 3D transformed child elements. For example:

    .owl-item {
  perspective: 2em;
}
#owl-demo .owl-item > div {
  margin: 0px 2px;
  height:100px;
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
}

    Because the child divs of the owl-item containers all have 3D transforms applied to them, this will apply a perspective to each of them. However, this makes removing the perspective from a single child (the active div) impossible, at least with pure CSS.

    transform: perspective(n), on the other hand, affects each of the child elements individually, so the perspective can be removed by applying the active class:

    #owl-demo .owl-item > div {
  margin: 0px 2px;
  height:100px;
  background: #cccccc;
  -moz-transform: perspective(2em) rotateX(15deg) scaleY(1);
  -o-transform: perspective(2em) rotateX(15deg) scaleY(1);
  -ms-transform: perspective(2em) rotateX(15deg) scaleY(1);
  -webkit-transform: perspective(2em) rotateX(15deg) scaleY(1);
  transform: perspective(2em) rotateX(15deg) scaleY(1);
  transition: transform .5s;
}
#owl-demo .owl-item.active > div{
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
}

    Hopefully this helps with the understanding of the 2 perspective approaches. I know it helped me :)