Visual Glitch with Conic-Gradient

Question

I am trying to make a simple conic-gradient with css, but there is a strange horizontal line appearing. The lines are unpredictable and sometimes go away when the window is resized.

div {
    width: 101.5px;
    height: 101.5px;
    background: conic-gradient(
       #000 0% 7%, 
       #cfcfcf 7.3% 40.3%,
       #666 40.6% 73.7%,
       #000 74% 100%
    );
  }

<div></div>

Image of Glitch

Why is this happening? Should I abandon conic-gradients altogether?

Answer 1

I'm on an M1 MacBook in Chrome, and I only see this issue when:

• "Use hardware acceleration when available" is enabled in Chrome
• the element has a non-even height and width

So a couple of possible options would be to:

1. disable "Use hardware acceleration when available" in Chrome
2. use a separate background layer with an even width and height