Closed
Bug 262194
Opened 20 years ago
Closed 19 years ago
Underlying IFRAMEs cause MouseOver/MouseOut errors with DIVs
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 164302
People
(Reporter: john.hoffman, Assigned: bugzilla)
References
Details
Attachments
(1 file)
|
1.08 KB,
text/html
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; rv:1.7.3) Gecko/20040913 Firefox/0.10
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; rv:1.7.3) Gecko/20040913 Firefox/0.10
Situation : An HTML document contains both an IFRAME and a DIV, and the DIV has
been repositioned to overlap part of the IFRAME. The DIV draws properly over top
of the IFRAME when the document is rendered, however, if you try to add
"OnMouseOver" or "OnMouseOut" events for the DIV, the IFRAME disrupts the DIV's
collision detection.
Reproducible: Always
Steps to Reproduce:
1. Create an HTML document with the provided HTML code and JavaScript.
<HTML>
<BODY>
<BR><BR>
<IFrame name =" i_Content"
id =" i_Content"
width =" 100%"
height =" 90%"
frameborder =" 1px solid black"
backgroundcolor =" #C32A26"
align =" left"
src =" "
></IFrame>
<DIV id =" d_HotSpot"
style =" z-index : 1;
background-color : #C32A26;
border : 4px solid #000000;
padding : 5px;
top : 20px;
left : 40px;
position : absolute;
width : 180px;
height : 98px
"
onmouseover="document.getElementById('d_HotSpot').style.border='4px
solid #00FF00';"
onmouseout ="document.getElementById('d_HotSpot').style.border='4px
solid #000000';"
></DIV>
</BODY>
</HTML>
2.) Identify components in document : DIV is red rectangle with a black border.
IFRAME is white inset frame which lies underneath the red DIV.
3. Observe normal/expected behavior : Move the mouse pointer from the document
body until it is over *just the DIV*, and the DIV's border turns green to
indicate MouseOver state. Move the mouse pointer back out of the DIV so that it
is over the document body, and the DIV's border will revert to black to indicate
MouseOut state.
4. Observe first collision-detection problem : Move the mouse pointer from the
document body until it is over *just the DIV* (DIV's border turns green), and
then (while keeping the mouse pointer over the DIV) move the mouse pointer
slowly back and forth over the IFRAME's upper border repeatedly. The green
border of the DIV will flicker black as collision-detection is disrupted by the
IFRAME's border underneath the DIV.
5. Observe second collision-detection problem : Position the mouse pointer over
top of the IFRAME's white interior only, then move the mouse pointer over the
DIV (where the DIV overlaps the IFRAME) and the DIV's border will turn bright
green. Now, move the mouse pointer so that it is again outside of the DIV but
still inside of the IFRAME — the MouseOut event does not trigger at all for the
DIV. Now, move the mouse pointer outside of *both* the DIV and the IFRAME, and
the MouseOut event will finally trigger.
Actual Results:
Collision detection for MouseOver and MouseOut events are confused when DIV and
IFRAME overlap. IFRAME borders disrupt collision-detection on overlying DIVs,
and IFRAME footprints prevent MouseOut states from firing if the mouse pointer
exits a DIV onto an underlying IFRAME.
Expected Results:
MouseOver/MouseOut events should only be recorded within the footprint defined
by the DIV, and should not be affected by other document elements.
This is a serious bug, as many modern websites coded under the WC3 standard
employ DIVs extensively, and correct mouse pointer collision detection is
critical — especially for menus. ;)
|
Reporter | |
Comment 1•20 years ago
|
||
NOTE : Above code has extra whitespaces which will ruin the test case... :\
Please use the following instead! :)
<HTML>
<BODY>
<BR><BR>
<IFrame name = "i_Content"
id = "i_Content"
width = "100%"
height = "90%"
frameborder = "1px solid black"
backgroundcolor = "#C32A26"
align = "left"
src = ""
></IFrame>
<DIV id = "d_HotSpot"
style = "z-index : 1;
background-color : #C32A26;
border : 4px solid #000000;
padding : 5px;
top : 20px;
left : 40px;
position : absolute;
width : 180px;
height : 98px
"
onmouseover="document.getElementById('d_HotSpot').style.border='4px
solid #00FF00';"
onmouseout ="document.getElementById('d_HotSpot').style.border='4px
solid #000000';"
></DIV>
</BODY>
</HTML>
|
||
Comment 2•20 years ago
|
||
What about attaching a working testcase?
|
|
||
Comment 3•20 years ago
|
||
This is a duplicate of bug #247401
|
|
Reporter | |
Comment 4•20 years ago
|
||
Ah...! Bugzilla word-wrapped the JavaScript lines, that's why they don't work if you just cut and paste the sample code. Here's the actual document as an attachment...
|
|
||
Comment 5•20 years ago
|
||
Thanks for adding the testcase. It works and I can see the problem. Seems that it is the same as in bug #247401. Please have a look there (and the references therein).
|
||
Comment 6•20 years ago
|
||
All seem to be related <A HREF=https://bugzilla.mozilla.org/show_bug.cgi?id=262194>bug# 262194</A> <A HREF=https://bugzilla.mozilla.org/show_bug.cgi?id=247401>bug# 247401</A> <A HREF=https://bugzilla.mozilla.org/show_bug.cgi?id=164302>bug# 164302</A> <A HREF=https://bugzilla.mozilla.org/show_bug.cgi?id=155276>bug# 155276</A> Problem is also experienced in Firefox 1.0
|
||
Comment 7•19 years ago
|
||
*** This bug has been marked as a duplicate of 164302 ***
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•