Issues With -webkit-transform/transition

General Community > HTML/CSS

(1/1)

ccsknight:
I've found that when combining (-webkit-transition:ease-in-out) and (-webkit-transform:rotate), Google Chrome will quickly flash (reload?) the first time a link is hovered over.
If you test out the style below you'll see what I mean. It only happens the FIRST time these links are hovered on within a browsing session.
This does not happen in Firefox, Safari, or Opera.

Any suggestions how to fix this? I haven't come up with anything.

CSS

--- Code: ---html{
width:100%;
height:100%;
margin:0 auto;
background-color:#555555;
}
body{
width:100%;
height:100%;
margin:0 auto;
color:#303030;
font-family:arial;
text-align:center
}
.wrapper{
display:block;
width:100%;
height:auto;
margin:0 auto;
padding:0
}
#top_nav_bg{
width:980px;
height:45px;
margin:0 auto;
padding:0;
background-color:#000000
}
ul#top_nav{
height:25px;
margin:0;
padding:10px 0;
float:left;
border:none;
list-style:none;
display:inline
}
ul#top_nav li, .menu-blog-container ul li{
line-height:25px;
padding:0 0 0 40px;
float:right;
color:#F2F2F2;
font-size:16px;
text-transform:uppercase
}
ul#top_nav li a, .menu-blog-container ul li a{
display:block;
color:#F2F2F2;
text-decoration:none;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
}
ul#top_nav li a:hover, .menu-blog-container ul li a:hover{
color:#F2F2F2;
text-decoration:none;
-webkit-transform:rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
}
#top_nav_wrap{
height:45px;
margin:0;
padding:0;
background-color:#000000;
}
--- End code ---

HTML
--- Code: ---<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>my website</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<nav id="top_nav_wrap" role="navigation">
<div id="top_nav_bg">
<div class="wrapper">
<ul id="top_nav">
<li><a href="http://www.google.com/">Home</a></li>
<li><a href="http://www.google.com/">Links</a></li>
<li><a href="http://www.google.com/">Favorites</a></li>
<li><a href="http://www.google.com/">About</a></li>
</ul>
</div>
</div>
</nav>
</head>
<body>



</body>
</html>

--- End code ---

epicoder:
Best I can tell, the delay is Chrome loading the FPS meter. I don't know if there's a way to turn this off, even in the client. If there is, there is very little possibility that you will be able to turn stop it from your page. You could always wait until CSS3 goes standard and all the kinks are ironed out in the browsers. ;)

Navigation

[0] Message Index

Go to full version