CSS3 transform rotates causing 1px shift in Chrome

Question

I have a problem with chrome with css3 rotation conversion. The transition works fine, but immediately after its completion, the element is shifted by a pixel. Another strange thing is that this only happens when the page is centered ( margin:0 auto; ). The error also persists if you also delete the transition.

You can see how this happens 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 margin:0 auto; so she disappears.

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

I am using version 24.0.1312.57 on OSX 10.6.8

Greetings

Answer 1

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

Must fix it!

Gino

Answer 2

I had the same problem, I fixed it by adding the following to the css div using the transition:

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

Backface is used for 3D transitions, but if you use only 2D, there is no need for additional materials.

Answer 3

there is something unusual in the relationship between the dimension of the body and the structure of the transformation. I'm actually not because the iframe fiddle contains a code preview.

Anyway, I suggest this approach:

 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