CSS3 transform rotate causing 1px shift in Chrome

Question

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

I don't notice a shift in the block. Is it happening to the block as well? — JSuar, Feb 06 '13 at 13:03
it happens for both, shifts 1px up just after the transition finishes — DonutReply, Feb 06 '13 at 13:21
... other people are telling me it's still happening for them so seems it's a temperamental chrome issue — DonutReply, Feb 06 '13 at 15:48
I can confirm your findings. At first I saw the issue but after multiple tests I no longer saw the shift. — JSuar, Feb 06 '13 at 15:59
I'm seeing this issue in Chrome 25, but not in 22. Has anyone submitted a bug report for it? http://dev.chromium.org/for-testers/bug-reporting-guidelines — Chris B, Feb 26 '13 at 23:32
I reported it through "tools > report an issue" in chrome. if you want to test and report in chromium go for it — DonutReply, Feb 27 '13 at 12:07
I checked this in Chrome 26 and 27, and it seems to be fixed. — Chris B, Mar 02 '13 at 05:37

score 108 · Accepted Answer · edited Mar 25 '14 at 13:57

108

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

Should fix it!

Gino

edited Mar 25 '14 at 13:57

Mooseman

18,763
14
70
93

answered Mar 25 '13 at 20:15

Gino

1,176
1
8
7

That's beautiful, thank you! It didn't work for me as is but adding the vendor prefix fixed it. – Leonard Apr 18 '13 at 14:53
1

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. – thenickdude Aug 15 '13 at 05:42
Edited the answer to include the `-webkit-` prefix. Previously it did not, hence the comments above. – Henrik N Nov 17 '13 at 12:54
Awesome! this fixed a very pesky isuue I had with a TranslateY element on hover. For unknown reasons subsequent `` 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! – Gruber Dec 01 '13 at 18:23
Right... I assumed people would add the webkit since it was a webkit fix... Thanks! – Gino Dec 19 '13 at 02:11
Thanks a lot for this. I've encountered this a few times and it baffled me. This fixed it! +1 – htmlbot Apr 24 '14 at 15:04
5

Does anyone know why this work? I feel strange putting things into my css without understanding them. – Charlie OConor Apr 17 '17 at 19:47
1

This happened to me in Firefox too, so I'm not sure this is just a Chrome thing. – Rokit Jan 30 '18 at 06:52
I've used this successfully in the past but on my current project it doesn't work. – limeandcoconut Dec 05 '18 at 01:22
This fix helps with the gap, but text and the borders of the divs become blurry. (Chrome v79.0.3945.130 - WIN 10) – spierala Jan 22 '20 at 22:09

score 22 · Answer 2 · answered Apr 07 '14 at 09:27

22

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.

answered Apr 07 '14 at 09:27

Delmontee

1,898
2
26
44

1

Thanks for the complement with `transform`, this answer solved my issue. – Alexis B. Oct 23 '15 at 12:20
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! – taketheleap Dec 23 '15 at 15:15
@FredK: Just add it to your list of transform values. Adding `translateZ(0)` was enough in my case. – wortwart Jun 27 '16 at 15:02

score 2 · Answer 3 · answered Aug 30 '22 at 16:51

2

will-change: transform; on the element helped to me in 2022 (Chrome). No more 1px shift of the text inside the element after zoom animation.

answered Aug 30 '22 at 16:51

Vladimir Tolstikov

2,463
21
14

score 0 · Answer 4 · answered Feb 06 '13 at 15:59

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

score 0 · Answer 5 · answered Jan 16 '23 at 11:15

0

For 3d transform use this instead:

-webkit-transform: perspective(1px) scale3d(1.1, 1.1, 1);
transform: perspective(1px) scale3d(1.1, 1.1, 1);

answered Jan 16 '23 at 11:15

Silvia Malavasi

35
7

CSS3 transform rotate causing 1px shift in Chrome

5 Answers5

Linked

Related