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

Status: UNCONFIRMED

(Core :: DOM: UI Events & Focus Handling, defect)

Description

[Erekose Craft]

Attachment: 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.

Comment 1

[Erekose Craft]

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

[Loic]

Could you attach a minimal testcase (.html), please.

Comment 3

[Erekose Craft]

Attachment: Test page reconstructing the bug.

The bug does reoccur on my system with this test page.