Incorrect border rendering when using css transform in Firefox

Question

I have a simple CSS arrow like this:

.arrow-brown {
    height: 18px;
    width: 18px;
    border-top: 6px solid #39170b;
    border-right: 6px solid #39170b;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

In Firefox the borders are not rendered correctly, two thin white lines are appearing accross the border width. Is there any workaround to get rid of them??

Here's the rendered picture: https://i.sstatic.net/zUsoQ.png

And here's the fiddle: https://jsfiddle.net/w2s9gp8w/

Answer 1

That worked for me:

transform-style: preserve-3d;