变换：translate（0％，0％）导致元素被错误地渲染

Question

请注意以下代码段：

<div style="
  position: fixed;
  padding: 0.3;
  width: 11.4px;
  height: 11.4px;
  overflow: hidden">
  <div style="
    position: fixed;
    width: 12px;
    height: 12px;
    background: red;
    border-radius: 6px">
  </div>
</div>

它完美呈现一个红色圆圈。现在，如果我们采用相同的HTML并在顶部div中添加translate(0%,0%)样式，结果不应该改变，对吗？我们来试试吧：

<div style="
  position: fixed;
  padding: 0.3;
  width: 11.4px;
  height: 11.4px;
  transform: translate(0%,0%);
  overflow: hidden">
  <div style="
        position: fixed;
        width: 12px;
        height: 12px;
        background: red;
        border-radius: 6px">
  </div>
</div>

在Chrome 61.0.3163.100上，这会导致圆圈呈现错误，边框为直边。以下是我在两个示例中看到的截图：

为什么？