ThaoD5 ThaoD5 - 5 months ago 48
CSS Question

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.

Answer

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);
}

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;
}
Comments