iphone - 过渡或动画后元素变得模糊

Question

在我使用 CSS transition 或包含 rotate 的 animation 之后，整个包含的 div 变得有点模糊，
我读到重绘元素会产生某种副作用，但有什么办法可以防止这种情况发生吗？

.toggle {
    position: absolute;
    width: 36px;
    height: 36px;
    bottom: 7px;
    right: 94px;
    z-index: 200;
    background: transparent url("../img/handle-open.png") no-repeat;

    -webkit-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
       -moz-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
            transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
}

.toggle-closed {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
            transform: rotate(180deg);
}

我尝试用 animate 实现相同的效果并得到相同的结果

更新:我注意到发生了一些奇怪的事情 - 在 chrome 中，当动画运行时元素变得模糊，当动画停止时它恢复正常，
在 iOS 上，情况恰恰相反——图像在动画时清晰，但在完成时变得模糊!另一个奇怪的@$$ 错误!？

Answer 1

我之前在做动画之后看到过这样的问题。检查过渡后对象的尺寸，它的尺寸很可能已经改变了几个点，导致模糊。我，即:

转换前:36x36 过渡后:36.2 x 36.8