When an (X)HTML document is embedded in a containing (X)HTML document by means of the HTML object
element, mouseout
events on HTML elements of the embedded (X)HTML document fail to fire properly when mousing out of the HTML object
element to the containing (X)HTML document. On mousing out of the HTML object
element, a mouseout event will fail to fire until the next mouse over of the same HTML object
element. The exact behavior is dependent upon the structure of the embedded (X)HTML document and manifests in two cases.
In the following, "HTML object
element" is contained in the containing (X)HTML document. An "embedded HTML element" refers to an HTML element within the embedded (X)HTML document with an attached event handler.
If the containing blocks of the HTML object
element and an embedded HTML element are coincident and without any intervening HTML content then the mouseout
event will not fire when mousing out of the HTML object
element across the coincident containing block side(s). The mouseout
event will fire upon the next mouse over on the same HTML object
element.
If the containing blocks of the HTML object
element and an embedded HTML element are not coincident or are coincident with intervening HTML content then the mouseout
event may or may not fire when mousing out of the HTML object
element depending on the traversal rate of the mouse.
If the traversal rate of the mouse across intervening HTML content is sufficiently slow when exiting the HTML object
element then the mouseout
event will fire before the mouse exits the HTML object
element container - the expected behavior.
If the traversal rate of the mouse across intervening HTML content is sufficiently fast when exiting the HTML object
element then the mouseout
event does not fire until the next mouse over on the same HTML object
element.
The mouseout
event bug is observed in both FireFox 2.0.0.3 and SeaMonkey 1.1.1 running on fully updated versions of both Win98SE and WinXP Professional SP2 on PC platforms (desktop and laptop). Not tested on other platforms or OSes.
Browser versions tested: | |
FireFox | Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3 |
SeaMonkey | Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8.1.2) Gecko/20070222 SeaMonkey/1.1.1 |
The demonstrations below are exceedingly trivial JavaScript mouse rollovers. Certainly this effect could be achieved with CSS, but that is NOT the point. The point is that the mouseout
event on HTML elements of an embedded HTML document within a containing HTML object
element do not fire correctly when mousing out of the HTML object
element. It so happens that the mouse rollover script simply and clearly demonstrates the failure of mouseout
event when embedded within an HTML object
element.
This bug was observed in transitioning from XHTML 1.0 to XHTML 1.1. Since XHTML 1.1 does not support HTML iframe
elements, XHTML code that was embedded via the HTML iframe
element was changed to use the HTML object
element - at which time the mouseout
bug was observed.
This bug manifests itself with any XHTML 1.0 DTD. This webpage uses the XHTML 1.0 frameset DTD since the HTML iframe
element is used.
The demonstrations below work as expected on Opera8/9 browsers without modification on exactly the same physical platforms where FireFox and SeaMonkey exhibit this bug - the bug is not platform related.
Webpage behaviors (not simply trivial rollovers) dependent upon the proper functioning of the mouseout
event obviously break with this bug.
The demonstrations consist three XHTML files: objectembed.html, list.html, and table.html. All files are self-contained, that is, all CSS and JavaScript are embedded in the source files.
These demonstrations create three stacked boxes with text and different background colors by embedding XHTML source files by means of the HTML iframe
and object
elements. mouseover
and mouseout
event handlers are attached to the boxes to effect mouse rollover (change in background color) by means of JavaScript. On mouseover
the background color of the box is changed. On mouseout
the backgroud color is restored to the original color.
objectembed.html is the main file that embeds the files list.html and table.html by means of the HTML iframe
and object
elements. The HTML iframe
and object
elements have a 1-pixel, dotted border to visually indicate the extents of the embedded objects. Also, the containment area of both objects is intentionally larger than required by the embedded XHTML files, and thus, the white box below the embedded content.
list.html and table.html create the three stacked blocks by means of HTML unordered list and table elements, respectively. list.html attaches the mouseover
and mouseout
event handler to the HTML li
elements. table.html attaches the mouseover
and mouseout
event handler to the HTML tr
elements. For both list and table versions there is a container consisting of an HTML div
element with a 2-pixel, solid red, top and right border.
These demonstrations use a single event handler for both mouseover
and mouseout
events. However, although not demonstrated here, the bug persists even when separate event handlers for mouseover
and mouseout
events are used. Similarly, the bug persists without regard to which event capture phase is used: capture or bubbling.
As the demonstrations indicate, the mouseout
bug is insensitive to the target HTML element to which it is attached.
Demonstrations 1 and 2 exhibit the correct mouseout
behavior of embeded XHTML documents list.html and table.html, respectively, by means of HTML iframe
elements.
Demonstration 1
list embedded with iframe
Demonstration 2
table embedded with iframe
Demonstrations 3 and 4 exhibit the abberant mouseout
behavior of embeded XHTML documents list.html and table.html, respectively, by means of HTML object
elements. Note the following:
object
element as indicated by the dotted border.object
element as indicated by the dotted border. Observe that the color of the block is not restored to its original color, the mouseout
event failed to fire. Do any of the following:
mouseout
event fires when the mouse pointer re-enters the object
element and the background color is restored. Since the mouse pointer is over the same block, a mouseover
event is immediately generated and the block re-enters the rollover state.object
element by moving the mouse pointer so as to re-enter the object
element in the white space below the colored blocks from either the left, bottom, or right. Note that the block that was in the rollover state is restored to its original color, i.e., the mouseout
event fired upon re-entering the object
element, but not when leaving.object
element by moving the mouse pointer so as to re-enter the object
element on any colored block different from the block in the rollover state. Note that the block that was in the rollover state is restored to its original color and the block just moused over enters the rollover state. Again, the mouseout
event fired upon re-entering the object
element, but not when leaving.object
element, as indicated by the dotted border, and crossing the solid red border. Observe that the color of the block may or may not be restored to its original color. Depending on the traversal rate of the mouse pointer, the mouseout
event may or may not fire before exiting the confines of the object
element. Observe the following:
object
element, the mouseout
event fires and the block rollover state is exited since the event occurs within the confines of the object
element.object
element, the mouseout
event does not fire and the block rollover state is not exited.object
element and an embedded HTML element are coincident and without any intervening HTML content, as is the case with the left side of the colored blocks, then the mouseout
event will not fire when mousing out of the HTML object
element across the coincident containing block side. The mouseout
event will fire upon the next mouse over on the same HTML object
element.Demonstration 3
list embedded with object
Demonstration 4
table embedded with object