CSS3 transform rotate causing 1px shift in Chrome

I'm having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (margin:0 auto;). The bug is still there if you remove the transition as well.

You can see it happening here:

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

Comment out the margin:0 auto; line to make it go away.

Anyone have any ideas of how to stop this while keeping the page centered?

I'm using Version 24.0.1312.57 on OSX 10.6.8

Cheers

Actually just add this to the site container which holds all the elements: -webkit-backface-visibility: hidden;

Should fix it!

Gino

I had the same issue, I fixed it by adding the following to the css of the div that is using the transition:

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

Backface is used for 3D-based transitions but if you are only using 2D there is no need for the extra stuff.

there is something unusual in the relation between the body dimension and the structure of the transform. I don't in fact is because the fiddle iframe that contains the preview of the code.

Anyway, I will suggest this approach instead:

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

Here is the updated fiddle