为什么 Chrome 在使用翻译时会导致此边框/此图像周围流血？答案

【问题标题】：Why does Chrome cause this border / bleed around this image when using translate?为什么 Chrome 在使用翻译时会导致此边框/此图像周围流血？
【发布时间】：2017-08-18 21:54:43
【问题描述】：

看这个小提琴：

https://jsfiddle.net/uy6yhv4d/1/

我有一个带有background-color: red 的img。

在页面上正常渲染时，不使用transform，会按预期显示，没有红色边框。

但是，当我 trasform: translate 进行定位时，红色背景现在“渗出”边缘，导致出现红色边框。

为什么会这样？

【问题讨论】：

这可能是由浏览器四舍五入的小数像素引起的。至于为什么它只在您很好地应用transform 属性时发生......这让我很头疼。 This 你可能会感兴趣。
我认为会发生这种情况，因为图像不能用点数拉伸到宽度。如果你在图像周围添加一个 div 并在那里设置 objevit-cover / contains 值 - 它会非常适合:)
@MichaelUnterthurner @I haz kode 我认为分数只是其中的一部分。即使您删除了它们，您仍然会在那个小提琴中看到移动设备上的红色边框。
jsfiddle.net/778oaqLq 我做了一个新的小提琴，对样式进行了一些更改。使用这种方法，红色边框不可见。浏览器本身无法拉伸图像，因为带有点号的图像会被四舍五入..（如本文第一条评论中所述）。

标签： css google-chrome browser

【解决方案1】：

红色边框来自background-color: red;。我发现从维度中删除点值会删除红色边框的外观：

img {
  height: 256px;
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
}

【讨论】：

我认为分数只是其中的一部分。即使你删除了它们，你仍然会在那个小提琴上看到一个红色的边框。