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

Question

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

在我的上一个项目中，我使用线性渐变作为按钮的背景。在悬停时有背景过渡，在这个地方推了一个白色的背景并拉了一个蓝色的背景。简单的效果，通过将背景大小设置为200％然后在悬停时通过更改背景位置来实现。

在下面的代码段中，至少在Chrome上（在FF，Safari和IE中没有错误），你可以看到我的意思。此错误仍然存​​在，并使渐变的蓝色部分可见（右侧1px），而在悬停时，此1px由白色部分填充。

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<button>Example button</button>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

更改为：

background-size: 250% 100%;

button {
  position: relative;
  padding: 10px 15px;
  background-color: #fff;
  background-image: linear-gradient(to left, #fff, #fff 50%, #003b7c 50%, #003b7c);
  background-size: 250% 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>