CSS Transition in Google Chrome is moving absolute positioned divs

Asked Mar 05 '13 at 13:32

Active Mar 05 '13 at 13:33

Viewed 273 times

I'm building a site and have applied some CSS transitions to a few of the elements.

I've noticed that in Google Chrome, when you initiate the transitions it seems to have an impact on the other 'absolute' positioned divs.

For example, I have applied the following transition to the social media icons on this page.

http://bit.ly/WLaMMh

-webkit-transition:all 0.1s ease-out;   
-webkit-transform:scale(1.1,1.1);

When you hover over the icons, they increase in size slightly. For some reason, the logo at the top of the page (which is positioned absolutely) moves 1 or 2 pixles to the left.

Any idea why this is happening?

Thanks

Brad

asked Mar 05 '13 at 13:32

user25705

works fine for me too – Sahil Popli Mar 05 '13 at 13:39
Looks fine for me as well – otinanai Mar 05 '13 at 13:40
The logo doesn't move, it bumps to the right then returns to the left after the transform has completed. I see it too running chrome on Ubuntu. – Patrick James McDougle Mar 05 '13 at 13:46
I ran across this before.. this SO post might be some help http://stackoverflow.com/questions/12827135/css3-transform-affecting-other-elements-with-chrome-safari – bntrns Mar 05 '13 at 14:35
Hi, thanks for this guys, I'm still not sure how to solve this. It's only in the chrome browser this happens (on PC) I'm not sure about Mac. – user25705 Mar 05 '13 at 22:53

CSS Transition in Google Chrome is moving absolute positioned divs

0 Answers0