Bug in Internet Explorer when appending object/embed-element

[[email protected]…]

I've noticed a bug in Internet Explorer 6 and higher when appending a quicktime-object. The object seems to be appended at an incorrect location, because trying to empty the element in which it is placed will yield no result. I stumbled upon this when using one of the media-plugins for Jquery. In earlier versions of Jquery (1.0.4 and earlier) the plugin works because it inserts the object with html(), which has been changed/updated since the 1.1 release to use append. Appending the object in Firefox or Safari works like a charm, so I guess it's an IE-bug only. As far as I can tell this bug has been present since the initial 1.0 release of Jquery. A testcase can be viewed at this location: ​http://www.mrvulcan.nl/jquery/

[nathanhammond]

Test Case

[nathanhammon]

The problem can be traced to how IE handles appendChild for object/embed elements. I've stripped out as much jQuery as possible to demonstrate the underlying browser bug.

var htmlized = $('<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" height="800" width="800" ID="Qtactivexplugin1"><param name="src" value="http://malsup.com/jquery/media/simpsons.mov"/><embed src="http://malsup.com/jquery/media/simpsons.mov" pluginspage="http://www.apple.com/quicktime/download/" height="800" width="800" /></object>').get(0);
document.getElementById('movie').appendChild(htmlized);

It works however if you set it with innerHTML:

var mystring = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" height="800" width="800" ID="Qtactivexplugin1"><param name="src" value="http://malsup.com/jquery/media/simpsons.mov"/><embed src="http://malsup.com/jquery/media/simpsons.mov" pluginspage="http://www.apple.com/quicktime/download/" height="800" width="800" /></object>';
document.getElementById('movie').innerHTML = mystring;

The output in IE using the appendChild method (very screwy):

1. The object element fills the window starting from the origin { top: 0, left: 0 }, identified as "0" in the ascii art below.

2. The descendant embed element is centered at the origin of the parent object element.

+-----------------+
|                 |
|        0--------|--------+--------------------------------+
| EMBED  |        |        |                                |
+--------|--------+        |                                |
         | OBJECT          |                                |
         +-----------------+                                |
         |                                                  |
         |                                                  |
         |                                                  |
         |                                                  |
         |                                                  |
         | WINDOW                                           |
         +--------------------------------------------------+

The same results occur with any amount of HTML wrapped around the object/embed. To fix this we would have to catch the scenario that the document fragment being appended has a a QuickTime object/embed tag in it and, if so, handle everything with innerHTML. Not a fun proposition.

[snover]

This ticket has been marked as missing a test case. In an effort to reduce the number of outstanding tickets in the bug tracker, it will be closed automatically in 30 days. In order to prevent this from happening, please provide a working test case. If a test case has already been provided and our records are wrong, please respond to the ticket so that it can be fixed. Thank you!

[trac-o-bot]

Automatically closed due to 14 days of inactivity.