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;

这是一个非常奇怪的变通办法，但在您的情况下应该有效。