Problem with CSS -webkit- transition

[cpyle0819]

Hi all. I’m trying to make a simple hover link with a bg color transition. It seems to work in Dreamweaver’s live view but won’t cooperate in Chrome. Any help is appreciated.
Thanks!

Site

HTML

Link

CSS

* {

margin:0;

padding:0;

}



#nav-wrap {

position:absolute;

width:100%;

background:#292938;

height:120px;

}



#nav-main {

position:relative;

width:360px;

margin-left:auto;

margin-right:auto;

}

#nav-main a {

text-decoration:none;

color:#000;

}



#nav-about {

position:relative;

float:left;

height:70px;

width:100px;

background:#903;

margin-left:10px;

margin-right:10px;

padding-top: 50px;

text-align:center;

-webkit-transition: background 1s ease-out;

}



#nav-about:hover {

background:#fff;



}



#nav-contact {

position:relative;

float:left;

height:120px;

width:100px;

background:#C09;

margin-left:10px;

margin-right:10px;

}



#nav-gallery {

position:relative;

float:left;

height:120px;

width:100px;

background:#6CF;

margin-left:10px;

margin-right:10px;

}

[joshuanhibbert]

It is possible that you are encountering a known Chrome bug: http://code.google.com/p/chromium/issues/detail?id=101245

[cpyle0819]

Ah, indeed. Thank you. I certainly feel better about myself at least.
*update* Ayup, works fine in FF.

[cpyle0819]

Noted.

[joshuanhibbert]

There are apss like LiveReload to help with that.

[Author]

Posts