html - 处理子像素时​​ Chrome 线性渐变错误

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 上修复，我需要做的就是将 background-size 中的 auto 替换为 100% .