Firefox: Weiße Linien beim Drehen der Grenzen

Question

Ich habe ein kleines Problem, wenn ich die Grenzen einer ::after drehen: In der Ecke der Grenzen sehe ich weiße Linien. Hier ist mein HTML:

<a class="tt__list__tabs__singleTab__backLink tt__list__tabs__wrap__links tt__list__tabs--innerTab__link" href="#tt__list__tabs__wrap--outerTabs" style="display: flex;"> 
    <span class="tt__list__singleTab__headline">Back</span> 
</a> 

Und hier meine CSS:

.tt__list__tabs__wrap__links{ 
    background:transparent; 
} 

.tt__list__tabs__wrap__links::after { 
    background:transparent; 
    border-top: 5px solid black; 
    border-right: 5px solid black; 
    content: ''; 
    display: inline-block; 
    height: 0.75em; 
    transform: rotate(45deg); 
    width: 0.75em; 
} 

Here is the jsfiddle für die Ausgabe.

Ich benutze Win10, Browser ist der neueste Firefox. Bild: http://imgur.com/a/kGNeX

Ich habe schon den Trick mit dem transparenten Hintergrund versucht. Fehle ich etwas? Irgendwelche Ideen?

Answer 1

fand ich die Antwort für den Firefox-Bug:

transform: translateZ(1px) rotate(45deg); 

keine mehr weiße Linien.

Aktualisiert jsFiddle: https://jsfiddle.net/hy7vhprf/2/