火狐動漫硬件加速像素化邊緣

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; 

這是一個非常奇怪的解決辦法，但應該在你的情況下工作。