90 度线性渐变边缘不均匀
Uneven edge on 90deg linear gradient
我正在尝试使用此 CSS 创建一半为一种颜色、一半为透明的背景。
linear-gradient(90deg, rgba(238, 238, 241, 0.9) 50%, transparent 0);
这在大多数情况下工作正常，但在某些浏览器宽度下，colour/transparent 部分之间的分割变得不均匀和锯齿状。
我查看了常见的渲染错误，例如，使用 45 度角时。但永远不要直线穿过它。
我的假设是问题是由子像素渲染问题引起的，因为宽度是百分比。有人对我如何解决这个问题有任何想法吗？
我认为这个问题主要出现在 chrome 几天前，我遇到了同样的问题，然后我使用 css 属性 修复了它，即
-webkit-backface-visibility: hidden;
-webkit-background-clip: content-box;
padding: 1px;
说不定对你有帮助！！
在评论中，Temani 建议我尝试使用小数百分比。
我已将 CSS 更改为
linear-gradient(90deg, rgba(238, 238, 241, 0.9) 50.1%, transparent 0);
现在可以使用了。仍然不太确定为什么会这样，但至少它在视觉上起作用了！如果有人可以对此进行扩展，我很想知道更多。
我正在尝试使用此 CSS 创建一半为一种颜色、一半为透明的背景。
linear-gradient(90deg, rgba(238, 238, 241, 0.9) 50%, transparent 0);
这在大多数情况下工作正常，但在某些浏览器宽度下，colour/transparent 部分之间的分割变得不均匀和锯齿状。
我查看了常见的渲染错误，例如，使用 45 度角时。但永远不要直线穿过它。
我的假设是问题是由子像素渲染问题引起的，因为宽度是百分比。有人对我如何解决这个问题有任何想法吗？
我认为这个问题主要出现在 chrome 几天前，我遇到了同样的问题，然后我使用 css 属性 修复了它，即
-webkit-backface-visibility: hidden;
-webkit-background-clip: content-box;
padding: 1px;
说不定对你有帮助！！
在评论中，Temani 建议我尝试使用小数百分比。
我已将 CSS 更改为
linear-gradient(90deg, rgba(238, 238, 241, 0.9) 50.1%, transparent 0);
现在可以使用了。仍然不太确定为什么会这样，但至少它在视觉上起作用了！如果有人可以对此进行扩展，我很想知道更多。