Nth-child transition not working - Possible chrome bug?

HTML & CSS
1

Been playing around with the webkit transform and transition methods for some sort of navigation.

The final effect should be all odd navigation items rotate on hover, and all even navigation items scale. On safari this works fine, however on Chrome only the first item does anything.

Occasionally in Chrome it will work so try refreshing a couple of times.

See following test case:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Nth-child Hover Transform</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				font: normal 18px/1.5em Arial, Verdana;
				color: #2c2c2c;
				background: #EFEFEF;
			}
			#nav {
				margin: 40px;
			}
			#nav li {
				float: left;
				margin-right: 20px;
				list-style: none;
			}
				#nav a {
					display: block;
					text-decoration: none;
					color: #666;
					font-weight: bold;
				}
				#nav a:hover {
					color: #000;
				}
				#nav li:nth-child(odd) a:hover {
					-webkit-transform: rotate(360deg);
					-webkit-transition: -webkit-transform 0.5s ease-out;
				}
				#nav li:nth-child(even) a:hover {
					-webkit-transform: scale(1.4);
					-webkit-transition: -webkit-transform 0.1s ease-out;
				}
		</style>
    </head>
    <body>
        <div id="nav">
			<ul>
				<li><a href="#">News</a></li>
				<li><a href="#">Weather</a></li>
				<li><a href="#">Sport</a></li>
				<li><a href="#">Business</a></li>
				<li><a href="#">Radio</a></li>
				<li><a href="#">Politics</a></li>
			</ul>
		</div>
    </body>
</html>
2

Hi,

Both Chrome and Safari have long standing bugs when hover is combined with pseudo classes (all the way back to p:hover + p) where sometimes they work and sometimes they don’t so it’s not surprising that you run into issues with more complicated transitions.

In your case it looks like you can get to what you want by doing this instead.


[B]#nav li:nth-child(odd):hover a[/B] {
                    -webkit-transform: rotate(360deg);
                    -webkit-transition: -webkit-transform 0.5s ease-out;
                }
                [B]#nav li:nth-child(even):hover a[/B] {
                    -webkit-transform: scale(1.4);
                    -webkit-transition: -webkit-transform 0.1s ease-out;
                }