1

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?

Quincy Nash
  • 141
  • 1
  • 6
  • Please provide enough code so others can better understand or reproduce the problem. – Community Jul 15 '22 at 05:34
  • I can't reproduce the problem on my system (Edge and FF on Windows10) but that doesn't mean it doesn't happen on some devices! It sounds like a sort of edge effect which can occur when the system is struggling with matching a part CSS pixel to the several screen pixels that make up one CSS pixel on modern screens. – A Haworth Jul 15 '22 at 07:24
  • Could you explain why you have slight differences in the % values between the colors? It creates a very slight fadey sort of effect towards the outer edges of the different colors, though not perceptible near the center. Is this intentional or are you seeking a crisper line? – A Haworth Jul 15 '22 at 07:26
  • I added the slight percentage differences to remove the jaggedness of the lines. This was recommended by many other posts – Quincy Nash Jul 15 '22 at 07:27
  • @AHaworth The gradient only breaks at specific sizes. I updated the snippet to include a breaking pixel size. – Quincy Nash Jul 15 '22 at 18:02
  • Afraid I still don't see the hoizontal line problem. (I've tried both zooming and resizing the viewport). Thanks for the info on the jagged edge problem which I hadn't seen before. – A Haworth Jul 15 '22 at 21:04
  • I'm on an M1 MacBook in Chrome, and I only see this issue when "Use hardware acceleration when available" is enabled. https://codepen.io/brettlyne/pen/JjaaBWx reproduces the issue (any conical gradient with a non-even height and width) – Morlem Mar 20 '23 at 17:16

1 Answers1

0

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
Morlem
  • 129
  • 1
  • 4