翻译50％不适用于Chrome中的宽度1px

Question

为什么将元素翻译50％会导致渲染错误？

在Firefox中工作。

笔自我解释：

http://codepen.io/rdsedmundo/pen/wWNqKw

.line {
  width: 1px;
  height: 30px;
  background-color: red;
  margin-bottom: 10px;
}

.translate50 {
  transform: translateX(50%);
}

Answer 1

显然这是一个基于单位的问题，因为它涉及像素和百分比，而且只发生在奇数中。

发布后5分钟，我设法解决了＃34;使用hack：保留1px的元素宽度和背景颜色与容器相同，并在左侧（或右侧）添加边框，也测量1px，以及我想要的颜色线（在本例中为红色）

.line {
  width: 1px;
  height: 30px;
  background-color: red;
  margin-bottom: 10px;
}

.translate50 {
  transform: translateX(50%);
  background-color: white;
  border-left: 1px solid red;
}