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         


        

Answer 1

That worked for me:

transform-style: preserve-3d;