css - 为什么 Chrome 在使用翻译时会导致此图像周围出现此边框/出血？

Question

看这个 fiddle :

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

我有一个 img 设置了 background-color: red。

在不使用转换的情况下正常呈现在页面上时，它会按预期显示，没有红色边框。

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

为什么会这样？

Answer 1

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

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