Chrome中奇怪的边框宽度行为？

Question

我的Chrome（第33.0.1750.152页）在某些输入的边框宽度上表现得非常奇怪。

以下是Codepen演示它：http://codepen.io/anon/pen/Dkadl。

我添加了Increase margin..和Decrease margin..按钮，以便更容易查看（点击它们以相应地更改margin-bottom属性。）

margin-bottom的{​​{1}}属性似乎影响了我输入的.user-inputs以及模糊其他元素。我只能在Chrome中看到此错误。

出了什么问题？

编辑：这就是我的样子：
如您所见，元素变得非常模糊，某些元素的边框宽度也增加了。

Answer 1

这是由翻译50％引起的，在不是整数（部分像素）的边距上，它会使内容模糊。

根据this similar question的回答，将这些添加到您的＃login-section块：

-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

查看更新的Codepen