CSS translate(0,5px) is making things wiggle on the X axis

Question

I have a css translate happening on hover. It only affects the Y axis but it is jumping around. This makes the hover effect look wonky.

-webkit-transform: translate(0,5px);

The effect is on the main navigation. You can see it here: http://pineriver.com

Is this related to rounding or text pixel snapping? If so, I don't like it :) You can see I've already tried tricks like opacity:.99.

I've worked around the problem by by using traditional top: and bottom: to do the translations, but I still am curious why this happens. I would really like to be able to use css translates to do visual butter things like this.

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

I thought this was an interesting problem, but I'm going to give all the credit to google.

To the nav.primary ul li and .siteHeader .siteLogo rule add this:

-webkit-backface-visibility: hidden;

I found the idea here and here.

Also here is some more reading from stackoverflow. They're talking about iPhone dev but it's still webkit.

edited May 23 '17 at 12:12

Community

1
1

answered Mar 02 '13 at 05:13

Dave L

1,636
9
10

That's odd. Is there any explanation on why a 2D transform is messing up with 3D stuff? – Niet the Dark Absol Mar 02 '13 at 05:25
Wow. This is like a throwback to the olden days of hasLayout. An invisible switch. http://www.satzansatz.de/cssd/onhavinglayout.html – SimplGy Mar 02 '13 at 05:25
Oh, Firefox has a similar wiggle, by the way. – SimplGy Mar 02 '13 at 05:27

CSS translate(0,5px) is making things wiggle on the X axis

1 Answers1