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;

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