CSS3 transformar girar causando 1px cambio en Chrome

Estoy teniendo un problema en Chrome con un css3 transformar girar transición. La transición está funcionando bien, pero justo después de que termine el elemento cambia por un píxel. La otra cosa extraña es que solo sucede cuando la página está centrada (margin:0 auto;). El error sigue ahí si también eliminas la transición.

Puedes verlo aquí:

Http://jsfiddle.net/MfUMd/1 /

HTML: 

<div class="wrap">
    <img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>

<div class="wrap">
    <div class="block"></div>
</div>

CSS: 

.wrap {
    margin:50px auto;
    width: 100px;
}
.block {
    width:30px;
    height:30px;
    background:black;
}
.target,.block {
    display:block;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.target:hover,.block:hover {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

Comenta la línea margin:0 auto; a hacer que desaparezca.

¿Alguien tiene alguna idea de cómo detener esto mientras mantiene la página centrada?

Estoy usando la versión 24.0.1312.57 en OSX 10.6.8

Salud

Author: JSuar, 2013-02-06
Source

3 answers

En realidad, simplemente agregue esto al contenedor del sitio que contiene todos los elementos: -webkit-backface-visibility: hidden;

Debería arreglarlo!

Gino

 96
Author: Gino Sciretta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-25 13:57:55

Tuve el mismo problema, lo arreglé agregando lo siguiente al css del div que está usando la transición: 

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

Backface se utiliza para transiciones basadas en 3D, pero si solo está utilizando 2D no hay necesidad de las cosas adicionales.

 18
Author: james,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-07 09:27:09

Hay algo inusual en la relación entre la dimensión del cuerpo y la estructura de la transformación. Yo no, de hecho, es porque el iframe fiddle que contiene la vista previa del código.

De todos modos, sugeriré este enfoque en su lugar: 

body{
  width:100%;
  float:left;
}

.wrap {
  margin: 50px 45%;
  width: 5%;
  float: left;
}
.block {
  width:30px;
  height:30px;
  background:black;
}
.target,.block {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

Aquí está el violín actualizado

 0
Author: wandarkaf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-06 15:59:09