SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Location
    Internet
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nth-child transition not working - Possible chrome bug?

    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:

    Code HTML4Strict:
    <!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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •