在Chrome上缩小时，1px线性渐变消失

Question

我在元素的底部应用了1px的线性渐变 当浏览器缩放设置为100％时，一切都很完美。

如果我将缩放比例缩小到90％，则背景不再可见。

仅在Google Chrome上发生...我该如何解决？

这是造型（手写笔）：

.test
  height: 20px;
  background-image: linear-gradient(to top, red, red)
  background-size: 1px 1px
  background-position: bottom
  background-repeat: repeat-x

这里的演示：
http://codepen.io/FezVrasta/pen/epLGep?editors=110