Html 图像的背景色有时显示在容器外部

我想显示一些颜色动态调整的形状。为此，我准备了所有形状作为图像，形状内部区域透明，外部为白色。要更改形状的颜色，我只需设置

img

元素的

background color

属性

问题是，有时我可能会在图像边缘看到1像素宽的线条。谷歌Chrome Android版可以看到图像顶部的这条线，而在PC版中，一旦页面放大，就可以看到这个问题。这个问题在Firefox中没有出现。这里有一个（更新的）

此外，如果删除外部

div

元素或其样式（我添加了它，因为我希望页面在水平和垂直方向上居中），则不会出现问题

---

我正在寻找任何解决方案：要么修改我的代码，要么用另一种方法来实现动态着色形状的目标。

这看起来像是GPU加速合成中的一个小故障。如果您不需要CSS中的

transform

属性，那么删除它应该可以为您解决问题（至少在Chrome on OS X中是这样）。在这种情况下，您可以（例如）使用负边距

<div style="position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -27px">
    <img src="http://s10.postimg.org/vipedk1qd/arrow_up.png" style="background-color: #000000;"/>
</div>

---

我能从您的代码中看到的是，代码行溢出了。您只需将

overflow:hidden

添加到

div

元素中即可。 看到这个了吗

---

最后，我设法找到了一个可行的解决方案：

backface-visibility: hidden;
-webkit-backface-visibility: hidden;

这必须添加到应用了

transform

属性的主容器的样式中<代码>溢出：隐藏是不需要的

---

看看这个。

这解决了这个特殊情况下的问题，但是看看这里：使用

溢出：隐藏缩放页面后，该行即可见。我相应地更新了问题中的链接。是的。。那是真的。。cupawn提供的另一种解决方案也面临同样的问题。。需要更好的解决方案。。