CSS :hover is inconsistent while Javascript constantly changes a .style value

RESOLVED INACTIVE

Status

()

Core
Event Handling
RESOLVED INACTIVE
6 years ago
4 days ago

People

(Reporter: Erekose Craft, Unassigned)

Tracking

17 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

6 years ago
Created attachment 692566 [details]
An image showing the inconsistency of the :hover effect.

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0
Build ID: 20121128204232

Steps to reproduce:

I've created a page where the background of the navigation bar scrolls. I did this by changing the .style.background to
"URL('navBG.png') 0px "+pos+"px"
where pos is a predefined variable that increments every 20 milliseconds via SetTimeout and resets to 0 at 400.

There are also links in said navigation bar composed of DIVs within anchors that have CSS :hover effects.


Actual results:

While the background is scrolling, the navigation button's :hover effect works, but inconsistently. When you move over, sometimes it won't change as it should but other times it will. The same happens when you mouse-out: sometimes it changes, sometimes it doesn't.


Expected results:

The :hover effect should work consistently, despite JavaScript constantly changing a CSS value on the parent element.
(Reporter)

Comment 1

6 years ago
Important CSS:
#nav a{
	color:#555555;
	text-decoration:none;
}
#nav a:hover{
	color:#71ff71;
}
#nav a .button
{
	height:25px;
	width:125px;
	margin:0px;
	padding:0px;
	text-align:right;
	cursor:pointer;
	background:URL("navButtonUp.gif");
}
#nav a:hover .button
{
	background:URL("navButtonDown.gif");
}



Important JavaScript:
nav=null;
pos=0;
function init()
{
	nav = document.getElementById("nav");
	main();
}
function main()
{
	pos++;
	if(pos>=400)
		pos-=400;
	nav.style.background="URL('navBG.png') 0px "+pos+"px ";
	setTimeout("main()",20);
}

Comment 2

6 years ago
Could you attach a minimal testcase (.html), please.
Flags: needinfo?(erekosec)
Component: DOM: CSS Object Model → Event Handling
(Reporter)

Comment 3

6 years ago
Created attachment 692858 [details]
Test page reconstructing the bug.

The bug does reoccur on my system with this test page.
Flags: needinfo?(erekosec)

Updated

6 years ago
Attachment #692858 - Attachment mime type: text/plain → text/html

Comment 4

4 days ago
Per policy at https://wiki.mozilla.org/Bug_Triage/Projects/Bug_Handling/Bug_Husbandry#Inactive_Bugs. If this bug is not an enhancement request or a bug not present in a supported release of Firefox, then it may be reopened.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 days ago
Resolution: --- → INACTIVE
You need to log in before you can comment on or make changes to this bug.