CSS3 transform rotate powoduje przesunięcie 1px w Chrome

Mam problem w chrome z CSS3 transform rotate transition. Przejście działa dobrze, ale tuż po jego zakończeniu element przesuwa się o piksel. Inną dziwną rzeczą jest to, że dzieje się to tylko wtedy, gdy strona jest wyśrodkowana (margin:0 auto;). Błąd nadal istnieje, jeśli usuniesz Przejście.

Możesz to zobaczyć tutaj:

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

Skomentuj margin:0 auto; wiersz do niech to zniknie.

Ktoś ma jakiś pomysł, jak to zatrzymać, utrzymując stronę w centrum?

Używam wersji 24.0.1312.57 na OSX 10.6.8

Cheers

Author: JSuar, 2013-02-06
Source

3 answers

Właściwie wystarczy dodać to do kontenera witryny, który zawiera wszystkie elementy: -webkit-backface-visibility: hidden;

Powinno to naprawić!

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/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-25 13:57:55

Miałem ten sam problem, naprawiłem go dodając do css div, który używa przejścia: 

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

Backface jest używany do przejść 3D, ale jeśli używasz tylko 2D, nie ma potrzeby stosowania dodatkowych rzeczy.

 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/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-07 09:27:09

Jest coś niezwykłego w relacji między wymiarem ciała a strukturą transformacji. W rzeczywistości nie jest, ponieważ fiddle iframe, który zawiera podgląd kodu.

W każdym razie, zaproponuję zamiast tego takie podejście: 

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

Oto zaktualizowane

 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/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-06 15:59:09