element zostanie rozmyte po transformacji lub animacji

Question

Po użyciu CSS transition lub animation że zawiera rotate cały zawierającego div dostaje trochę zamglony
Czytałem, że jest to jakiś efekt uboczny z przerysowywania elementu, ale jest tam sposób, aby temu zapobiec?

.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); 
} 

ja próbuje osiągnąć to samo z animate i dostał ten sam rezultat

Aktualizacja: zauważyłem coś dziwnego dzieje - w Chrome, gdy animacja uruchamia element zostanie rozmyte a gdy animacja zatrzymuje go, powraca do normy,
na iOS, ale dzieje się tak na odwrót - obraz jest wyraźny podczas animacji, ale staje się zamazany po zakończeniu! kolejny dziwny błąd @ $$ !?

Answer 1

Widziałem takie problemy przed wykonaniem animacji. Sprawdź wymiary obiektu po przejściu, może bardzo dobrze się zmieniło o kilka punktów powodując rozmycie. I, e:

Przed przejściem: 36x36 po przejściu: 36,2 x 36,8