Chrome CSS3 border transition

Question

I have a problem only inside Chrome, it is checked inside Opera, FF, Safari and everything works fine.

I know that in Chrome 17 there was an error with clicking on the visited links, so I even included the thought, which was fixed.

There is still no animation for switching to hover for border-bottom.

any clues? I just don’t see anything? I read, and everything seems to be talking about the color of the text, while I'm trying to switch to a border color.

I tried animating at border-bottom from none to 1px solid # 9ecd41, but found that all browsers except firefox had a funky jagged animation where it seemed to bounce.

any help would be awesome, the code I'm working with is attached.

Ok, here is my html

<nav> <ul class="nav"> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">MEDIA</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> 

And here is my CSS

 nav { float: right; height: auto; width: auto; padding: 25px; } ul.nav { width: auto; height: auto; overflow: visible; } .nav > li { display: inline-block; margin-right: 20px; } .nav > li:last-child { margin-right: 5px; } /* non-visited links: Chrome transition bug fix */ .nav > li > a:visited { color: #ffffff; letter-spacing: 1px; text-decoration: none; display: block; font-family: "proxima-nova-condensed",sans-serif; font-style: normal; font-weight: 400; font-size: 12px; font-smooth: always; -webkit-font-smoothing: antialiased; padding-bottom: 5px; border-bottom: 1px solid #333; /* CSS3 transition */ -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; -o-transition: all .5s ease-in; -ms-transition: all .5s ease-in; transition: all .2s ease-in; } /* visited links: Chrome transition bug fix */ .nav > li > a { color: #ffffff; letter-spacing: 1px; text-decoration: none; display: block; font-family: "proxima-nova-condensed",sans-serif; font-style: normal; font-weight: 400; font-size: 12px; font-smooth: always; -webkit-font-smoothing: antialiased; padding-bottom: 5px; border-bottom: 1px solid #333; /* CSS3 transition */ -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; -o-transition: all .5s ease-in; -ms-transition: all .5s ease-in; transition: all .2s ease-in; } .nav > li > a:hover { border-bottom: 1px solid #9ecd41; } .nav > li > a:active { border-bottom: 1px solid #f96d10; } 

Answer 1

Just draw the <li> way I would like to style li with width / heights / padding / border, etc., and then just drew the link to fill in, and just entered the style and properties of the links. Chrome has a small error on the border to go to links

Answer 2

This should be an easy solution. As far as I can see, your problem is where you entered the transition. With chrome, it should be added to the parent itself.

Try adding it here:

 .nav > li { display: inline-block; margin-right: 20px; } 

Also add an declaration for -webkit- elements, for example,

 .nav > li { display: inline-block; margin-right: 20px; -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; -o-transition: all .5s ease-in; -ms-transition: all .5s ease-in; transition: all .2s ease-in; -webkit-transition-property: all; -webkit-transition-duration: .5s; -webkit-transition-timing-function: ease-in; } 

See if this works, and if not, I will try to create something similar and work on the solution.