Closed
Bug 383594
Opened 18 years ago
Closed 18 years ago
Slow when changing background image in of a:hover
Categories
(Core :: Layout, defect)
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: david.penny, Unassigned)
Details
(Keywords: perf, testcase)
Attachments
(4 files)
background image during a:hover state
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
I have a menu of options in a list like this:
<ul>
<li><a href="option1">Option 1</a></li>
<li><a href="option2">Option 2</a></li>
<li><a href="option3">Option 3</a></li>
<li><a href="option4">Option 4</a></li>
<li><a href="option5">Option 5</a></li>
<li><a href="option6">Option 6</a></li>
<li><a href="option7">Option 7</a></li>
<li><a href="option8">Option 8</a></li>
<li><a href="option9">Option 9</a></li>
<li><a href="option10">Option 10</a></li>
</ul>
The associated CSS looks something like this:
#menu li a {padding-left: 70px; margin-left: 6px; text-decoration: none; background:url("hovertestoff.gif") no-repeat left center;}
#menu li a:hover {background:url("hoverteston.gif") no-repeat left center; color: #000000;}
The idea is that as you scroll over an option, the background image is changed slightly (it seems to light up for example). However as I scroll through the list, there is a distinct time lag between the moment the mouse passes over the link (the hover) and the moment the background-image is swapped. In IE it works fine. In version 1.0 of FF (on Windows XP at least) it works fine. But since (at least) 1.5, FF has been sluggish.
Reproducible: Always
Steps to Reproduce:
1. Create an html document with this code:
<html><head><link rel="STYLESHEET" type="text/css" href="hovertest.css" media="all"></head>
<body>
<ul>
<li><a href="option1">Option 1</a></li>
<li><a href="option2">Option 2</a></li>
<li><a href="option3">Option 3</a></li>
<li><a href="option4">Option 4</a></li>
<li><a href="option5">Option 5</a></li>
<li><a href="option6">Option 6</a></li>
<li><a href="option7">Option 7</a></li>
<li><a href="option8">Option 8</a></li>
<li><a href="option9">Option 9</a></li>
<li><a href="option10">Option 10</a></li>
</ul>
</body>
</html>
2.Create a css file called hovertest.css with this code:
ul {list-style: none;font-size: 250%; margin:0; padding: 0;}
ul li {float: left; width: 100%; margin: 0;}
li a {padding-left: 70px; margin-left: 6px; text-decoration: none; background:url("hovertestoff.gif") no-repeat left center;}
li a:hover {background:url("hoverteston.gif") no-repeat left center; color: #000000;}
3. You need two images for the background (I think I can add them as an attachment afterwards...)
Actual Results:
The scrolling through the list is slow
Expected Results:
Should be faster!
It works fine in Safari and seems in FF 2.0.0.3 on OS X. I'm very sorry if the problem has nothing to do with Firefox but is particular somehow to my setup. I turned off all extensions.
|
Reporter | |
Comment 1•18 years ago
|
||
Put this file in the same directory as the html and css files
|
|
Reporter | |
Comment 2•18 years ago
|
||
Put this file in the same directory as the html and css files
|
|
Reporter | |
Comment 3•18 years ago
|
||
To produce the problem save this html file to the same directory as the .gif files and the css file.
|
|
Reporter | |
Comment 4•18 years ago
|
||
Save this css file to the same directory as the .gif files and the html files.
|
||
Comment 5•18 years ago
|
||
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a6pre) Gecko/20070607 Minefield/3.0a6pre
This is pretty snappy for me on Linux trunk. Can you test in Gran Paradiso alpha5 [0] and see if this still exists?
[0] http://download.mozilla.org/?product=granparadiso-alpha5&os=win
|
|
Reporter | |
Comment 6•18 years ago
|
||
It works perfectly in Gran Paradiso alpha5 [0], exactly as I expect it to. To make sure it's not something peculiar to my setup here I'm going to check on another computer and I'll advise.
|
|
Reporter | |
Comment 7•18 years ago
|
||
So I checked on another PC here and it seems it's nothing specific to my actual PC set up: the hover effect is definitely lagging behind the mouse. The delay is small (maybe 1/5 of a second or slighly more) but definitely noticeable.
|
|
||
Comment 8•18 years ago
|
||
This is probably something that got fixed by some of the major back-end changes that have happened since Firefox 2, which are not likely to be backported, unfortunately.
So if this works for you using Gran Paradiso, then this should probably be resolved as WORKSFORME.
|
|
Reporter | |
Comment 9•18 years ago
|
||
Okay, thanks Adam. That makes sense to me!
I'll set the resolution to WORKSFORME and thanks again for the help!
Status: UNCONFIRMED → RESOLVED
Closed: 18 years ago
Resolution: --- → WORKSFORME
You need to log in
before you can comment on or make changes to this bug.
Description
•