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)

Product:
Firefox
Component:
General
Version:
4.0 Branch
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
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.
This needs a simple HTML testfile or an example URL
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
OS: Windows 7 → All
Hardware: x86 → All
You need to log in before you can comment on or make changes to this bug.