elemento ottiene sfocata dopo la transizione o l'animazione

Question

Dopo che uso CSS transition o animation che include rotate tutta contenente div diventa un po 'sfocata,
ho letto che si tratta di una sorta di effetto collaterale di ridisegnare l'elemento, ma c'è un modo per prevenirlo?

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

ho cerca di ottenere lo stesso con animate e ottenuto lo stesso risultato

Aggiornamento: ho notato qualcosa di strano accade - in cromo, quando l'animazione viene eseguito l'elemento ottiene sfocata e quando l'animazione si interrompe, torna alla normalità,
su iOS, ma succede il contrario - l'immagine è chiara mentre è animata ma diventa sfocata quando completata! un altro bizzarro bug @ $$ !?

Answer 1

Ive ha visto problemi come questo prima dopo aver fatto le animazioni. Controllare le dimensioni dell'oggetto dopo la transizione, potrebbe essere molto cambiato di dimensioni di alcuni punti causando sfocature. I, E:

Prima di transizione: 36x36 dopo la transizione: 36,2 x 36,8