firefox causes visual artifact with "transform:rotate;"

Question

Firefox is creating small lines on the triangles I've created and rotated.

Chrome

FireFox

I've looked into what other questions have done and they recommended trying adding transform: translateZ(1px) rotate(-45deg); and background-clip: padding-box; but neither of those worked for me.

Also, it is only the rotated triangles that have the line in the firefox browser.

The page can be viewed at bingo-caller.herokuapp.com

Answer 1

I tried on your page and it seems to work, add translateZ(1px) to the transform for the triangles.

Answer 2

try this hack on the masked element: filter: blur(0.01px);

Answer 3

Until now desc 2022 that still haven

I fix using border with color depending to the background and can not use transparent of border color e.g I use white because my parent background is white

border: 1px solid white;