处理子像素时的 Chrome 线性渐变错误答案

【问题标题】：Chrome linear gradient bugs when dealing with subpixels处理子像素时的 Chrome 线性渐变错误
【发布时间】：2019-01-21 20:07:03
【问题描述】：

所以我一直在尝试使用线性渐变来设计我的网页，但由于某种原因，Chrome 不喜欢它必须处理亚像素。

看看下面的sn-p。它在 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>

【问题讨论】：

稍微增加宽度并使其变为 50.5% 而不是 50% .. 这是已知的，您无法通过渐变来避免它
@TemaniAfif 它可以与 Edge 一起使用吗？目前它在 Edge/Safari 中完全被破坏了。
即便如此我也不知道把 50.5% 放在哪里才能让它发挥作用。
它应该在那里background-size: 50.5% auto;，我不知道边缘/野生动物园我没有那些浏览器..你能分享那些坏掉的屏幕吗？
啊，是的，你应该避免使用自动...

标签： html css google-chrome cross-browser linear-gradients

【解决方案1】：

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

要解决 Chrome 上的问题，您需要在 background-size 中有一个分数。在我的情况下，我使用了50.06%，我发现它是最小值，四舍五入到 50.1%。在我的情况下，使用 larget 值会在输出中产生可见的噪音。

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

【讨论】：