CSS Transform Perspective bad pixelation in Firefox

Question

I am trying to make tabs like Chrome tabs. I use:

transform:perspective(4px) rotateX(-1deg);
-webkit-transform:perspective(4px) rotateX(-1deg);
-moz-transform:perspective(4px) rotateX(-1deg);

It looks nice in Chrome and IE, but in FF the left border is pixelated;

Firefox Firefox

Chrome/IE

How can I fix that?

Huh, that's unusual historically FF has handled things like this better than chrome [as in this question](http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome) not sure if you could try the backface visibility with a `-moz` prefix? — Novocaine, Oct 10 '14 at 14:05

score 3 · Answer 1 · edited May 23 '17 at 12:16

3

Issue was solved with

outline: 1px solid transparent;

edited May 23 '17 at 12:16

Community

answered Oct 10 '14 at 14:27

Ezio_

1 Answers1