Chrome 中的 CSS 线性渐变背景位置错误

Question

我想知道 Chrome 中是否有解决线性渐变背景错误的方法。

在我的上一个项目中，我使用了线性渐变作为按钮的背景。在悬停时有背景转换，它在这个地方推动了一个白色背景并拉出了一个蓝色背景。简单的效果，通过将 background-size 设置为 200% 然后在悬停时更改 background-position 来实现。

在下面的代码片段中，至少在 Chrome 上（在 FF、Safari 和 IE 中没有错误），您可以理解我的意思。这个错误仍然存​​在，使渐变的蓝色部分可见（右侧 1px），而在悬停时，这 1px 被白色部分填充。

我观察到，例如，当text-transform: uppercase未设置时，则没有问题。另一方面，在浏览器中使用缩放工具，在某些断点处设置间隙可见，反之亦然。

有人可以向我解释这种奇怪的行为吗？

button {
  position: relative;
  padding: 10px 15px;
  background-color: #fff;
  background-image: linear-gradient(to left, #fff, #fff 50%, #003b7c 50%, #003b7c);
  background-size: 200% 100%;
  background-position: 100%;
  font-weight: bold;
  color: #003b7c;
  text-transform: uppercase;
  outline: none;
  border: 2px solid #003b7c;
  border-radius: 0;
  transition: .25s ease-in;
}

button:active,
button:focus {
  padding-top: 12px;
  padding-bottom: 8px;
}

button:hover {
  color: #fff;
  background-position: 0 0;
}

<button>Example button</button>

Answer 1

原因是渐变重复了，Chrome 似乎呈现不同（我没有费心找出原因）。

要摆脱它，您只需添加 background-repeat: no-repeat;

button {
  position: relative;
  padding: 10px 15px;
  background-color: #fff;
  background-image: linear-gradient(to left, #fff, #fff 50%, #003b7c 50%, #003b7c);
  background-size: 200% 100%;
  background-position: 100%;
  background-repeat: no-repeat;
  font-weight: bold;
  color: #003b7c;
  text-transform: uppercase;
  outline: none;
  border: 2px solid #003b7c;
  border-radius: 0;
  transition: .25s ease-in;
}

button:active,
button:focus {
  padding-top: 12px;
  padding-bottom: 8px;
}

button:hover {
  color: #fff;
  background-position: 0 0;
}

<button>Example button</button>