72412 - images clipped by DIV at page load don't swap onmouseover after being moved into view by JS

Status: RESOLVED FIXED

(Core Graveyard :: GFX, defect, P2)

Description

[Chris Kaminski]

I'm just a designer, not a developer, and not an extraordinarily knowledgeable one at 
that, so try to bear with me.

The issue is that if one DIV is clipped by another, surrounding DIV and there are 
elements with mouseover effects inside the innermost DIV that aren't visible when the 
page is drawn, the mouseover effects won't display even though the mouseover script is 
functioning fine otherwise.

What I've got is three images (img1, img2, img3) inside A tags (a1, etc.), which are in 
turn inside a DIV (innerDiv) which is in turn inside another div (outerDiv). The clip region 
of outerDiv is set so that half of img2 and all of img3 are hidden. Outside of outerDiv 
there is a fourth image (otherImg), an A (moveLeft) that has an onclick handler that 
moves innerDiv to the left  to expose the remainder of img2 and part of img3 and a final 
A tag (moveRight) that moves innerDiv back. Each A tag (a1-a3) has an onmouseover 
handler set to swap the corresponding image (a1's handler swaps img1's .src attribute, 
etc.) *and* the .src for otherImg.

After the page loads, the mouseovers work fine on img1 and the visible portion of img2; 
that is, img1 swaps and otherImage swaps when you run your mouse over img1 (or, 
more accurately, over a1, the A tag that encloses img1). Ditto img2. After clicking 
moveLeft, the visible portion of img1 still swaps correctly and the part of img2 that was 
visible at page load swaps correctly, but the part of img2 that was hidden at page load 
doesn't change (although otherImg does) and img3 does not change (though again 
otherImg swaps just fine).

To reproduce:

1. Go to http://www.setmajer.com/test/scrollertest_moz.html

2. Run your cursor over the large colored boxes.

3. Click on the 'Move inner DIV to the left' link

4. Run your cursor over the large colored boxes again.

5. Click on 'Move inner DIV to the right' link

6. Run your cursor over the colored boxes one last time

This happens every time.

I have managed to reproduce the error on a Sony Vaio Z505-HSK running Win2K pro and 
Netscape 6.01 and on the same Mac (beige G3, ATI Xclaim VR 128 video, 24 MB RAM 
allocated to the browser, OS 9.0.4) with Netscape 6.01 and Mozilla 0.8. 

Sorry I didn't try the latest build on Windows, but frankly after a full day of research and 
testing to see if it was a problem with my code then 7+ hours of downloading newer 
builds, searching bugzilla for duplicate reports and which component I should report this 
under and then encountering a bug in bugzilla itself, I am in no mood. Reporting this has 
cost me too much money in terms of lost production time already.

Two other notes:

I have also reproduced this bug using text links and the CSS  the :hover pseudo selector 
for the onmouseover effects. The URL for the CSS version is: 

http://www.setmajer.com/test/scrollertest2_moz.html

Lastly, if you refresh the demo pages for this bug you will see the behavior described in 
(I believe) bug 20110: the mouseover images seem to be getting pulled from the server, 
not from the cache as they should be.

Comment 1

[Boris Zbarsky [:bzbarsky]]

I'm seeing this with Linux build 2001-03-14-08, with the old and new
viewmanagers both.  Over to Compositor.

Comment 2

[Chris Kaminski]

I built a few more test cases. The naming convention goes like this:
[which set overflow: hidden]_[which set clipping region].html

For example:

nohid_outerclip.html has the overflow: property unset on either DIV, but the clip 
property set to rect(0px 480px 90px 0px) on the inner DIV.

bothhid_noclip.html has the overflow: hidden property set on both DIVs, but no clip 
property set for either.

All combinations should be up there in the www.setmajer.com/test/ directory, but the 
most interesting is:

http://www.setmajer.com/test/outerhid_noclip.html

On that one, when I click the 'move inner DIV left' link the last 120px of the blue image 
stop rolling over--even though the entire blue image works fine before that. Click the 
'move inner DIV right' link, and everything goes back to the way it was.

Perhaps there's something about the CSS standard I don't know and this is what is to 
be expected, but it seems to me like something is really weird.

Comment 3

[Kevin McCluskey (gone)]

I can reproduce the problem with todays trunk build on WINNT. On mouse over the
right block is not fully highlighted. IE6 highlights the entire right block.

Comment 4

[Kevin McCluskey (gone)]

Moving to Moz1.1. Engineers are overloaded with higher priority bugs.

Comment 5

[Kevin McCluskey (gone)]

Bulk moving Mozilla1.2 bugs to future-P2. I will pull from this list when
scheduling post Mozilla1.0 work.

Comment 6

[Kevin McCluskey (gone)]

Bulk moving Mozilla1.1 bugs to future-P2. I will pull from this list when
scheduling post Mozilla1.0 work.

Comment 7

[Chris Kaminski]

I think this one is fixed now. I'm using an OS X nightly d/l on 4/16/02 ('about
Mozilla' gives me: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US; rv:0.9.9+)
Gecko/20020415), and <http://www.setmajer.com/test/scrollertest_moz.html> now
works correctly. A similar bug involving :hover styles at
<http://www.projectseven.com/mozbug/> also works.

Whether intentional or no, you guys seem to have fixed this one.

Thanks!

Comment 8

[Zack Weinberg (:zwol)]

The test cases are gone, and the original reporter said this was fixed back in 2002.  Closing.