firefox - 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;

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