Преобразование CSS3 вращается, вызывая сдвиг 1px в Chrome

У меня проблема с хром с преобразованием вращения css3. Переход работает нормально, но сразу после его завершения элемент смещается на пиксель. Другая странная вещь заключается в том, что это происходит только при центрировании страницы (margin:0 auto;). Ошибка также сохраняется, если вы также удалите переход.

Вы можете видеть, как это происходит здесь:

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

Прокомментируйте строку margin:0 auto;, чтобы она исчезла.

У кого-нибудь есть идеи о том, как остановить это, сохраняя при этом страницу в центре?

Я использую версию 24.0.1312.57 на OSX 10.6.8

Приветствия

Ответ 1

Собственно просто добавьте это в контейнер сайта, который содержит все элементы: -webkit-backface-visibility: hidden;

Должны это исправить!

Джино

Ответ 2

У меня была такая же проблема, я исправил ее, добавив следующее в css div, использующего переход:

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

Backface используется для 3D-переходов, но если вы используете только 2D, нет необходимости в дополнительных материалах.

Ответ 3

есть что-то необычное в отношении между размерностью тела и структурой преобразования. Я на самом деле не потому, что скрипка iframe содержит предварительный просмотр кода.

В любом случае, я предлагаю этот подход:

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

Вот обновленный fiddle