Closed
Bug 707129
Opened 13 years ago
Closed 12 years ago
It's extremely slow where use border-radius and mouse hover together
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: graduate_hjq, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.8 (KHTML, like Gecko) Chrome/17.0.942.0 Safari/535.8
Steps to reproduce:
I do something like this:
$("#someplace").hover(function(){
$(this).css("border","1px solid #f00").css("border-radius","4px");
},function(){
$(this).css("border","");
});
Actual results:
The script runs very slow. It's fine in ff3 because ff3 do not use border-radius. Seems border-radius costs much more time in ff4+ than in webkit, opera and even ie. Especially when it's applied together with a mouse hover.
I have the same problem on Ubuntu 12.10, FF 17.0.1.
It stops lagging when I remove gradients or "background-size" from the body or reduce a .content height. No problems in Chrome.
Example page: http://nychkarik.com/mozlag/
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
body {
background:silver; /*Olds*/
/*FF 3.6+*/
background: -moz-linear-gradient(45deg, transparent 50%, rgba(45,100,100,0.2) 50%, rgba(45,100,100,0.2));
/*11.10+*/
background: -o-linear-gradient(45deg, transparent 50%, rgba(45,100,100,0.2) 50%, rgba(45,100,100,0.2));
/*S 5.1 Ch 10+*/
background: -webkit-linear-gradient(45deg, transparent 50%, rgba(45,100,100,0.2) 50%, rgba(45,100,100,0.2));
/*IE 10*/
background: -ms-linear-gradient(45deg, transparent 50%, rgba(45,100,100,0.2) 50%, rgba(45,100,100,0.2));
background-size: 5px 10px;
}
nav {
text-align:center;
height:100%;
}
nav ul {
background-color:white;
border-top: 2px solid rgb(70, 200, 200);
border-bottom: 2px solid rgb(70, 200, 200);
}
nav li {
display:inline-block;
list-style-type:none;
}
nav a, nav a:hover, nav a:focus, nav a:active {
text-decoration:none;
outline: 0px none;
padding: 5px 20px;
}
nav a {
color:black;
}
nav a:hover {
background-color:white;
border-top: 3px solid rgb(70, 200, 200);
border-bottom: 3px solid rgb(70, 200, 200);
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
nav a:focus {
color:silver
}
.contentbox {
height:700px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">page 1</a></li>
<li><a href="#">page 2</a></li>
</ul>
</nav>
</header>
<div class="contentbox">
<br />
</div>
</body>
</html>
slow:
Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/17.0 Firefox/17.0
fast on beta:
Mozilla/5.0 (Windows NT 5.1; rv:18.0) Gecko/20100101 Firefox/18.0
someone here to confirm this?
Was unable to run beta on Ububntu. But I can confirm that on Windows it's fast enough.
Ok, let's close it for now. Please report here if it's not fixed in future Linux versions.
Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago
Resolution: --- → WORKSFORME
You need to log in
before you can comment on or make changes to this bug.
Description
•