webkit css transitions

Question

Trying out some webkit transitions on a site and have come across a problem. The hover state on my links adds a 1px border and decreases the padding so that the positioning stays the same. Works fine normally, but not when I add the transition. Obviously, as I'm only making 1px changes, it happens abruptly, but it doesn't happen at the same time - the padding changes before the border, so the whole thing 'jiggles'.

#loginbuttons a {
    text-decoration: none;
    padding: 5px;
    -webkit-transition: all 0.5s ease;
}

#loginbuttons a:hover {
    padding: 4px;
    border: 1px solid black;
    background-color: yellow;
}

The best way I've found to get around this is to have a white border on the normal state so that it's only changing the color, but I want it to be transparent. Also, is there any way of fading the background color in from white instead of black without setting a white background color? Again, I want it to be transparent, but it just looks weird going gray and then yellow!

I've got transitions on my navigation menu as well, and the same thing happens (this time altering the padding and margin):

#nav ul li a {
    color: white;
    padding: 10px 10px 8px 10px;
    margin: 0 5px;
    border: 1px solid black;
    opacity: 0.85;
    -webkit-transition: all, 0.5s;
}

#nav ul li a:hover, #nav ul li a.selected {
    color: black;
    padding: 13px 13px 11px 13px;
    margin: 0 2px;
    text-shadow: 2px 2px 4px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white;
    opacity: 1;
    -webkit-box-shadow: 0px 0px 8px #888;
}

Hmmm, just tried bumping the values up a bit, and even changing the margin and padding by 15px using a linear transition still produces a small (looks like 1 or 2px) glitch. Same thing happens in safari and chrome.

Anyone got any ideas how to make it smooth? Or sort out the color issue? Think it would be better doing it with jquery (ignoring the cross-browser support!)? Might go and see if the same thing happens with opera...

edit: seems like the 10.5a opera release for macs still doesn't support transitions...

Answer 1

First of all, it might be worthy to try border: 1px solid transparent so that the transition changes only the color of the border. In that sense the padding stays the same and there is less browser guesswork. If transparent does not work, any color with an alpha value of 0, for example, rgba(0, 0, 0, 0) is also acceptable.

Opera Presto 2.3 supports transitions, but it asks for different statements — -o-transition-property et al. Hope that this link would be of good use. Firefox does CSS transitions too, and they have a demo page. To make transitions work in Firefox, one must use -moz- statements.