firefox causes visual artifact with "transform:rotate;"

Question

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

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

We can't test a solution without the code, but all the glitches related to rotation on Firefox that I see, mention as a solution to use " outline: 1px solid transparent;" — Daniel Doblado, Jan 14 '19 at 22:04
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and **the shortest code necessary to reproduce it in the question itself**. Questions without a clear problem statement are not useful to other readers. See: mcve] — Rob, Jan 15 '19 at 00:57

score 1 · Answer 1 · answered Nov 18 '22 at 15:49

1

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

answered Nov 18 '22 at 15:49

hneupert

11
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 21 '22 at 16:34
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33217330) – samnoon Nov 24 '22 at 14:38

score 0 · Answer 2 · answered Jan 15 '19 at 00:55

0

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

answered Jan 15 '19 at 00:55

Daniel Doblado

2,481
1
16
24

[**Do not post images of code or errors!**](https://meta.stackoverflow.com/q/303812/995714) Images and screenshots can be a nice addition to a post, but please make sure the post is still clear and useful without them. If you post images of code or error messages make sure you also copy and paste or type the actual code/message into the post directly. – Rob Jan 15 '19 at 00:59
4

Sorry, in this case the image is not to show code but to show the visual glitch mentioned in the issue getting fixed, I'm also mentioning the code that needs to be changed as text. – Daniel Doblado Jan 15 '19 at 01:04

score 0 · Answer 3 · answered Dec 03 '22 at 20:10

0

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;

answered Dec 03 '22 at 20:10

Umar

155
1
10

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 07 '22 at 20:54

firefox causes visual artifact with "transform:rotate;"

3 Answers3