锥形梯度的视觉故障

Question

我试图用css做一个简单的圆锥梯度，但是有一个奇怪的水平线出现。这些行是不可预测的，有时会在调整窗口大小时消失。

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>

Glitch图像

为什么会发生这种情况?我应该完全放弃圆锥梯度吗?

Answer 1

我在Chrome上使用M1 MacBook，我只在以下情况下看到这个问题:

• "在可用时使用硬件加速"Chrome
• 元素的高度和宽度不均匀

所以几个可能的选项是:

1. disable "可用时使用硬件加速"在Chrome
2. 使用一个单独的背景层，宽度和高度均匀