I'm trying to create a selected or hover menu effect using CSS3 transitions. I'm doing this by animating the border-left-width and padding-left at the same time. The border is being increased by 6px and the padding decreased by 6px, both with a speed of .3s.
In Chrome, both animate at the same speed and looks smooth. In IE, the transition is instant (obviously no transition/animation), and looks good. In Firefox, the border and padding are animating at the same time but it appears on different intervals or something, making the text and container bounce around and look jittery.
Here is a Fiddle example: http://jsfiddle.net/crisp330/w7phH/1/ (See difference between FF and Chrome?)
Is there anyway to get FireFox to animate this smoothly like Chrome does? I know I can use alternatives such as positioning another element inside the LI and animating that... but this approach is sooo cleannnn!
Here's the meat of the CSS3 transition (see jsFiddle for working example):
ul li {
padding-left: 12px;
border: 0 none;
}
ul li:hover {
padding-left: 6px;
border-left: 6px solid #d17519;
transition: border-left-width .3s, padding-left .3s;
-moz-transition: border-left-width .3s, padding-left .3s;
-webkit-transition: border-left-width .3s, padding-left .3s;
-o-transition: border-left-width .3s, padding-left .3s;
}
Your real problem here is that Firefox allows non-integer-pixel padding values but only integer-device-pixel border values (because it turns out that web pages depend on borders being integer-width). Chrome forces both to integer numbers of pixels, so things work out there. For now. Until they start doing subpixel padding. But in Firefox you're getting 1-device-px bounce whenever the border goes from a bit less than a half-integer to a bit more than a half-integer.
There really isn't a great solution here, unfortunately. See http://robert.ocallahan.org/2008/01/subpixel-layout-and-rendering_22.html for a description of the problems WebKit's approach causes, for example.