elemento se vuelve borrosa después de la transición o animación

Question

Después de utilizar CSS transition o animation que incluye rotate el conjunto que contiene div consigue un poco borrosa,
leí que es algún tipo de efecto secundario de volver a dibujar el elemento, pero está ahí una forma de 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); 
} 

que trata de lograr lo mismo con animate y obtuvo el mismo resultado

Actualización: noté algo raro sucede - en cromo, cuando la animación se ejecuta el elemento se vuelve borrosa y cuando la animación se detiene, vuelve a la normalidad,
en iOS; sin embargo, sucede al revés: la imagen es clara mientras está animada, pero se vuelve borrosa cuando se completa. otro error raro de @ $$ !?

Answer 1

He visto problemas como este antes después de hacer animaciones. Verifique las dimensiones del objeto después de la transición, puede muy bien haber cambiado de tamaño en algunos puntos causando borrosidad. i, e:

Antes de transición: 36x36 después de la transición: 36,2 x 36,8