使用翻译时，为什么Chrome会导致此边框/出现此图像？

Question

看到这个小提琴：

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

我设置了img background-color: red。

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

然而，当我trasform: translate进行定位时，现在红色背景会出现＆＃34;出血＆＃34;边缘，导致出现红色边框。

为什么会这样？

Answer 1

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

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