Question

因此，我一直在尝试使用线性渐变设计网页，但是由于某些原因，Chrome不喜欢处理子像素。

看看下面的代码片段。它可以在Firefox中完美运行，但在Chrome中，中间会出现一条细线，如果宽度不奇怪，该细线会消失。同样，它在Edge上完全损坏。

有人知道一种解决此问题的方法以在所有浏览器中正常工作吗？（确保容器均匀）。

div {
  width: 201px;
  height: 50px;
}
.arrow {
  box-sizing: content-box;
  border: none;
  background: linear-gradient(15deg, #f7f7f7 0, #f7f7f7 50%, #008f49 50%, #008f49 52%, rgba(255,0,0,0) 52%, rgba(255,0,0,0) 100%), linear-gradient(345deg, #f7f7f7 0, #f7f7f7 50%, #008f49 50%, #008f49 52%, rgba(255,0,0,0) 52%, rgba(255,0,0,0) 100%), #1b4376;
  background-repeat: no-repeat;
  background-position: 0 50%, 100% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: 50% auto;
  min-height: 170px;
}

<div class="arrow">
</div>

Answer 1

我将在评论中发布Temani Afif的答案。

要在Chrome上解决此问题，您需要在background-size中加上一个小部分。就我而言，我使用的50.06%被认为是最小值，取整为50.1％。就我而言，使用大值会在输出中产生可见噪声。

关于如何修复Safari / Edge，我要做的就是将auto中的100%替换为background-size。

处理亚像素时的Chrome线性渐变错误

1 个答案: