1

So I have a border that is basically a half circle but rotated slightly. It looks fine in firefox but in chrome it has a thin line on the part of the border that should be transparent. If the element is not rotated it looks good in chrome and does not have the artifact appear. Anyone know what I'm missing here?

body {
  background-color: lightblue;
}

#line {
  border: 7px solid;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  width: 300px;
  height: 150px;
  border-color: #000 #000 rgba(0, 0, 0, 0) #000;
  margin: 100px;
  -webkit-transform: rotate(20deg)
}
<div id="line"></div>

and then here is what it looks like: in Chrome, in firefox

Kaiido
  • 123,334
  • 13
  • 219
  • 285
Vynpai
  • 15
  • 4
  • Jagged is always a product of rotation, Firefox seem to handle it better than chrome, you could do with `border-bottom-width:0;` to fix the Firefox issue – Rainbow May 30 '21 at 23:08
  • Have you tried adding `outline: 0` as well? – dale landry May 30 '21 at 23:34
  • I did try `outline` but not luck – Vynpai May 31 '21 at 00:13
  • You can remove the antialiasing artifact by adding `translateZ(0px)` after the rotate, but you still won't have the same linecap as Firefox... Anyway, this can be seen as a bug in Chrome, you should not have to force GPU rendering for it to not produce artifacts, so go to https://crbug.com to report it. – Kaiido May 31 '21 at 03:26
  • @kaiido that did in fact work and I should definitely do that thanks for the suggestion and the help. – Vynpai May 31 '21 at 03:49

1 Answers1

0

Try adding this property to the #line:

-webkit-backface-visibility: hidden;

This isn't exactly what this property usually used for, but it seems to help with fixing other odd transform associated rendering issues on Chrome such as jagged edges.

Source: Stackoverflow answer

tiffachoo
  • 131
  • 3