Javascript 谷歌Chrome浏览器放大时背景重复1像素

我在谷歌chrome（桌面和手机）上遇到了一个非常奇怪的问题。这是。 如果你放大到500%，你会在div的顶部看到绿线。看起来背景图像会自动重复。绿线是我的背景图像的底线，如果我使背景图像的底线透明，它就会消失。我在css中添加了repeat-x，但它仍然重复我图像的1个像素：

background: url('') repeat-x;

---

从所有内容中减去1px，包括背景x位置

.red-div{
    background-color: red;
    height: 29px;
    width: 300px;
}

.child {
    width: 100%;
    height: 100%;
    background: url('') repeat-x;
    background-position:-1px 100%;

}

---

我在Android设备中最常看到这个问题。现在，桌面Chrome上的背景图像缩放也被破坏了。如果我没记错的话，这是一个重复的错误，你可以看到图像的底部。您应该能够通过将图像向上移动半个像素来解决此问题

背景位置：左-0.5px。但是你需要在底部加一个像素。（但如果我没记错的话，我现在就不能测试；）