CSS3 Transition Chrome Problem

[josueochoa]

Hi, i got a problem with css3 transition in Chrome, it looks good in FF, it is a litle glitch that happens when i hover the element li, see for yourself:

http://josueochoa.com/new3/

Heres my code:

.nav ul li {

float:left;

-moz-transition:all .2s linear;

-webkit-transition:all .2s linear;

padding:0 20px;

}



.nav ul li a {

color:#161616;

font-size:16px;

height:45px;

display:block;

line-height:70px;

-webkit-transition:all .2s linear;

-moz-transition:all .2s linear;

padding:0;

}



.nav ul li.current a {

color:#FFF;

}



.nav ul li:hover {

padding:0;

}



.nav ul li:hover a {

background:#F1F1F1;

padding:0 20px;

}



.nav ul li.current,.nav ul li.current:hover a {

background:#e00000;

}

Thanks

[josueochoa]

the effect that i want to achieve is about deleting the li padding when is hover and adding a padding to the children a at the same time, so its neccesary that both elements get transitioned.

[Anonymous]

i think the ‘glitch’ he’s saying is that the nav text slighly moves on hover on chrome, it does not in FF..

[josueochoa]

^ yes, thats it.

[josueochoa]

yes, it works, but it doesn’t looks good in webkit browsers, you can test it in Firefox and then in Chrome to see the difference.

[Author]

Posts