FireFox中的同步CSS3过渡不平滑

Question

我正在尝试使用CSS3过渡创建选定的或悬停的菜单效果。我通过同时设置border-left-width和padding-left来实现此目的。边框增加了6px，填充减少了6px，两者的速度均为0.3s。

在Chrome中，两者均以相同的速度进行动画处理，并且看起来很平滑。在IE中，过渡是即时的（显然没有过渡/动画），并且看起来不错。在Firefox中，边框和填充是同时进行动画处理的，但是它们以不同的时间间隔或以不同的间隔出现，使文本和容器跳动并显得抖动。

[这里是小提琴的例子：http://jsfiddle.net/crisp330/w7phH/1/（看到FF和Chrome之间的区别吗？]

无论如何，是否有让FireFox像Chrome一样平滑地对其进行动画处理？我知道我可以使用其他方法，例如在LI内放置另一个元素并设置动画效果...但是这种方法太干净了！

这里是CSS3过渡的内容（有关工作示例，请参见jsFiddle：]

ul li {
    padding-left: 12px;
    border: 0 none;
}

ul li:hover {
    padding-left: 6px;
    border-left: 6px solid #d17519;
    transition: border-left-width .3s, padding-left .3s;
    -moz-transition: border-left-width .3s, padding-left .3s;
    -webkit-transition: border-left-width .3s, padding-left .3s;
    -o-transition: border-left-width .3s, padding-left .3s;
}

Answer 1

您真正的问题是Firefox允许使用非整数像素填充值，但仅允许使用整数设备像素边框值（因为事实证明网页取决于边框是整数宽度）。 Chrome会将两者都强制为整数像素，因此一切正常。目前。直到他们开始进行亚像素填充。但是，在Firefox中，只要边框从小于半整数的地方变为大于半整数的地方，就会出现1-device-px反弹。

不幸的是，这里确实没有很好的解决方案。例如，请参阅http://robert.ocallahan.org/2008/01/subpixel-layout-and-rendering_22.html，以获取有关WebKit方法造成的问题的描述。

Answer 2

显然，它周围有一个hack，这是为firefox添加一些旋转的功能。但是，该解决方案在最终输出中会产生轻微的旋转，但会提供平滑的过渡。

ul li:hover {
    -moz-transform: rotate(0.02deg);
}

从this website获得的解决方案