css - 跨浏览器动画抗锯齿

Question

我正在尝试为一个略微加宽并向后循环的小条设置动画。动画涉及它从 4px 扩大到 8px 并返回。在 Chrome 中，这个动画是抗锯齿的，但在 Firefox 和 IE 中不是。我通过给元素一个 1px 的背景颜色边框，让它在 Firefox 中工作，但这在 IE 中不起作用并且与 Chrome 混淆。

fiddle :http://jsfiddle.net/qAGL8/

@keyframes myAnimation {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(2); }
}

.thing {
    width: 4px;
    height: 50px;
    background: white;
    animation: myAnimation 4s infinite ease-in-out;
}

黑底白条，这是它在 Chrome 中抗锯齿的方式(注意灰色):

其他浏览器只处理整个像素。那么，基本上，有没有什么方法可以在所有浏览器中正确地消除锯齿？

Answer 1

如果在 .thing 元素上添加透明轮廓，即使在 Firefox 上动画也会更流畅

outline: 1px transparent solid;

示例:http://jsfiddle.net/Bf99F/