CSS3 transform rotate causing 1px shift in Chrome

google-chrome css css-transitions css-transforms

28,504

Solution 1

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

Should fix it!

Gino

Solution 2

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.

28,504

Author by

DonutReply

Updated on July 31, 2022

Comments

DonutReply almost 2 years

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

Leonard about 11 years

That's beautiful, thank you! It didn't work for me as is but adding the vendor prefix fixed it.
thenickdude over 10 years

Thanks! I was having the same issue with 1px shifts when I was doing simple opacity transitions in Chrome. Adding -webkit-backface-visibility:hidden to the container cured everything.
Matstar over 10 years

Edited the answer to include the -webkit- prefix. Previously it did not, hence the comments above.
Gruber over 10 years

Awesome! this fixed a very pesky isuue I had with a TranslateY element on hover. For unknown reasons subsequent <a> elements were shifted 1px right to come back to position an istant after. Was drivin me nuts.. though is there any info on WHY this happens and WHY is this the fix for it? Anyway thank god I've found your answer, +100 if I could!
Gino over 10 years

Right... I assumed people would add the webkit since it was a webkit fix... Thanks!
htmlbot about 10 years

Thanks a lot for this. I've encountered this a few times and it baffled me. This fixed it! +1
Alexis B. over 8 years

Thanks for the complement with transform, this answer solved my issue.
taketheleap over 8 years

Holy crap, this worked on a totally unrelated transform I was trying; but since you mentioned "3D based transitions", I gave it a shot. Lo and behold... Thanks!
wortwart almost 8 years

@FredK: Just add it to your list of transform values. Adding translateZ(0) was enough in my case.
Charlie OConor about 7 years

Does anyone know why this work? I feel strange putting things into my css without understanding them.
Rokit over 6 years

This happened to me in Firefox too, so I'm not sure this is just a Chrome thing.
limeandcoconut over 5 years

I've used this successfully in the past but on my current project it doesn't work.
spierala over 4 years

This fix helps with the gap, but text and the borders of the divs become blurry. (Chrome v79.0.3945.130 - WIN 10)