firefox动画硬件加速像素化边缘

Question

似乎firefox上的css动画像素化了元素的边缘:

这是一个简化案例 -

.test {
    width: 100px;
    height: 100px;
    border-radius: 0 0 14px 14px;
    left: 150px;
    top: 150px;
    background-color: black;
    -webkit-animation: move 4s ease 0ms both infinite;
    -moz-animation: move 4s ease 0ms both infinite;
}
@-moz-keyframes move {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(10deg); }
}
@-webkit-keyframes move {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(10deg); }
}

<div class="test"></div>

这在webkit上看起来很好,但是在Firefox中废话......任何人有什么想法？

Answer 1

尝试在元素的样式中添加:

outline: 1px solid transparent;

这是一个非常奇怪的解决方法,但应该适用于您的情况.