Internet Explorer Programming Bugs
Other pages that might be a better place for your contributions:
- All non-programming-related bugs should go in InternetExplorerFeedback about (non-programming-related) bugs
4/5/2008 9:04:37 AM - subasta
InternetExplorerBugs
- Talk about ProductFeedback support for standards in InternetExplorer
11/10/2007 4:00:15 PM - DU
InternetExplorerStandardsSupport
- Add to the InternetExplorerFeedback about requests for new features
3/19/2008 10:02:08 AM - transporteraccident
InternetExplorerFeatureRequests
DOM 1 Core support and DOM 1 Core testsuite failures
DOM 1 Core testsuite by W3C MSIE 6 and MSIE 7 fail 85 tests out of 224 tests, a 37.9% rate failure which is well over/above the percentage rate of Firefox 2 (6.3% failure rate) and Opera 9 (5.1% failure rate).
JavaScript Bugs
jscript.dll 5.6.1.2454 doesn't allow un-indexed arrays
The de-facto standard (even if not part of the ECMAScript standard) on all browsers has been to allow non-indexed arrays as follows:
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
Suddenly, in jscript.dll 5.6.1.2454, you give an error that the array is out of bounds. I know that's according to ECMAScript standards, but you're going to break half the web page out there, and guides like: http://www.w3schools.com/js/js_obj_array.asp
Exceptions handling
The code
window.make_throw = function(){throw new Error("abc")};
try { make_throw() } catch(e) { alert(e.message) };
produce alert "Object does't support this property or method" instead of "abc" on IE6? What about IE7?5/6/2008 12:50:52 AM - bonovox
IE6 (Service Pack 26/29/2005 6:01:27 PM - RaiN
SP2) and nothing alerts on What's known about InternetExplorer Version 75/3/2008 1:28:13 AM - bonovox
IE7 (7.0.5384).
repeated downloading of background-image on onmouseover
In the test page there is a DIV element with a CSS class with a background-image, the 'active tab'. The CSS class is initially added to the DIV element on the onload event and later by clicking on the tabs.
All 'tab' DIV elements have a onmouseover event to underline the text in the DIV.
When the mouse hovers over the 'active tab' DIV the background-image keeps getting downloaded repeatedly. This can be seen in the status bar displaying the message 'Downloading picture http://path/to/picture' constantly and the cursor turning into an hourglass. It can also be seen when using Fiddler or another HTTP Debugging Proxy to monitor the page. Also the background-image disappears and re-appears on the onmousover event.
This behaviour only occurs in IE when the test page is under a webserver, not when it is accessed local (only tested with IIS).
This behaviour does not occur in Mozilla, Firefox.
When running the page on IIS 5.1 on Windows XP Prof it can even result in a 'HTTP 403.9 - Access Forbidden: Too many users are connected Internet Information Services' error.
Test page: http://www.rokobama.com/ietest/
This is due to your browser settings...
This behaviour is only seen if your Temporary Internet Files settings include "Check for newer versions: Always", which is usual for web developers, but never found on normal users' machines. Switch it back to the default setting of "Automatically" and your problem vanishes. (Actually, this is something of a FAQ on the CSS Discuss list (http://www.css-discuss.org/) - I answered it twice in an hour last week, and it turns up at least three or four times a month.)
CRASH bugs
<font> and vertical-align: top in malformed markup code + IE6? What about IE7?5/6/2008 12:50:52 AM - bonovox
IE6 Service Pack 26/29/2005 6:01:27 PM - RaiN
SP2 = *CRASH!*
MSIE 6 SP 2 with all the security patches, including the August 2005 security patch, will crash when meeting malformed HTML code involving <font> and vertical-align like this:
@<div style="vertical-align: top;">@
@<p>First <font size="4">Paragraph</p>@
@<p>Second </font> Paragraph</p>@
@</div>@
Everything was nicely reported and clearly explained in october 2003 and the bug is still reproducible, 100% of the time.
Page where this bug is explained at http://jehiah.com/archive/ie-vertical-align-top-vulnerability
Proof of concept at http://www.jehiah.com/sandbox/vertical-align-top.htm
Single line of HTML will CRASH MSIE 6 (loading) and MSIE 7 (resizing) with all the patches.
MSIE 6 SP 2 with all the security patches, including the August 2007 security patch, and MSIE 7 SP 2 with all the security patches, including the August 2007 security patch will crash when loading and resizing the following malformed HTML code:
<style>*{position:relative}</style><table><input></table>
This has been confirmed by several people and can be verified, tested and investigated at:
Single line of HTML crashes IE 6 : http://immike.net/blog/2007/08/06/single-line-of-html-crashes-ie-6/ ,
August 6th 2007
FORM and FORM-related Elements issues
Form values are lost
If a page calls window.open() before submitting a form, then upon using the "back" button to return, the form is reverted to its initial values and any user-entered values are lost.
More info & testcase: http://h1.ripway.com/magicm/
BUTTON elements
IE has some old and very annoying bugs with <button> tag.
- Less annoying. <button> must be type="submit" by default.
- More annoying. <button> should send to server not it's content, but "value" attribute.
- Most annoying. If form has several <button> tags, only one (pressed) button should be sent to server (by analogy with <input type="submit"> behavior). Now IE is sending all buttons regardless to which to be pressed, and server-side script can't recognize which button was pressed. (see Successful controls World Wide Web Consortium
8/22/2007 3:37:21 AM - sdnmin
W3C HTML standard)
And IE has a related bug with DOM:
- In HTML code: <button id="mybutton" value="myvalue">foo foo foo</button>
- In JS/DOM code: document.getElementById("mybutton").getAttribute("value")
- Both return "foo foo foo", should return, "myvalue". -- Raoul
INPUT textboxes and TEXTAREA elements
Sizing
There's a very strange issue with input boxes (<input type="text"> and <textarea> ) - I have a repro case at http://www.winwonk.com/temp/ie6bug.html which shows how input boxes are auto-resized if you input anything but 7-bit chars into them. Try pasting "aa" into one of the fields.
The textareas expose this behavior with any input, IIRC.
I believe it's something related to the position: relative and width: 100% styles. -- Kim Grsman
Another utterly annoying input box bug is the 1px margin you can't get rid of on type=text inputs. Makes cross-browser designing of forms a nightmare. -- Niklas Bergius
Background Images
When a text input's style specifies a "background-image", the image scrolls with the text if the use inputs text past the end of the box. This prevents using styles such as the following:
input.required {
padding-left: 16px;
background: url('required.gif') no-repeat 2px 50%;
}
For an input with class="required" this initially displays as expected (the image is displayed at the left side of the input and the text starts after the 16px padding used to place it past the image. However, when inputing a long text string the image scrolls off the side. I would expect the text to scroll, but the background image should stay in place and the text should be hidden under the padding. This sample displays as expected in Mozilla-family browsers.
For a live example see the user login at the top of http://www.livejournal.com . Enter a long string of 'm's or another wide character and see the icon scroll off the left of the input field.
This is solved by simply adding "background-attachment: fixed;" to your input style definitions.
Getting and settings caret position via TextRanges
There's a way to save and restore caret position using TextRanges. First:
caret_bm = document.selection.createRange().getBookmark();
And then:
var range = input.createTextRange();
range.moveToBookmark(caret_bm);
range.select();
It fails mysteriously when caret is AT THE END (after last character) of a textarea. Selecting a range restored from such a bookmark leads to nothing and cancels the current running function (there's probably exception underway, but not the one I can catch). This bug is visible in ie7b2 too.
Checkboxes and Radio buttons
Radio Buttons
Radio Buttons (<INPUT type="radio">
should be uncheckable without a form reset or page reload. Maximum of one checked in an array of radio buttons, of course, but a checked element should be uncheckable by clicking it again.
Dynamically creating and DOM-inserting Radio Buttons
The only known way to create and DOM-insert dynamically radio buttons is to use this invalid way of using createElement:
var rdoElem = document.createElement("<input type='radio' name='rdoGrpName' value='Some value'>");
Mozilla1.x and Opera 7+ support accordingly the correct way to do this:
var rdoElem = document.createElement("input");
rdoElem.type = "radio";
rdoElem.name = "rdoGrpName";
rdoElem.value = "Some value";
(...)
document.forms["FormName"].childNodes[x].appendChild(rdoElem);
where childNodes[x] is an appropriate child node.
Dynamic Checkboxes Unchecked
Let's say you're creating a form that allows for an unspecified amount of different form elements, and you want to dynamically create checkboxes inside of that form using Javascript, you cannot create these checkboxes and have them checked. Example, a simple function to create a checkbox and append it to a parent form:
function createCheck(sName, sFormName) {
var newCheck = document.createElement('input');
newCheck.type = 'checkbox';
newCheck.name = sName;
newCheck.checked = true; // true, 1, 'checked', none of them work.
It should be defaultChecked, not checked. See http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20509171
DOM 2 HTML says "checked represents current state of form control" while defaultChecked represents the default, the start status of the form control.
-- DU/GT
var parentForm = document.getElementsByName(sFormName)[0];
parentForm.appendChild(newCheck);
}
Said function will run, a checkbox will be created and appended to the form, however it will not be checked, no matter what we try.
Have you tried defaultChecked like DOM 2 HTML recommends?
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20509171
Either your code works with defaultChecked or MSIE 7 should implement defaultChecked as DOM 2 HTML TR specifies.
-- DU/GT
Is simply got this working by setting checked to true after the element has been appended. I changed the testcase so it got inserted as a child for the body element, however (for simplicity). -- MarkusFischer
This is true, however if you're wanting to create a series of checkboxes, and put them into an object, for example, you would then need to be doing quite a lot of hacking to make sure the correct boxes are checked. It's an inconvenience mostly, and creates inefficient and messy code, and is especially frustrating when according to the MSDN what's happening is not the expected behaviour. -- AzMoo
There is benefit in the workaround/hack, however, to setting the checked property before appending. IE retains the property, but simply doesn't render it. A very simple function can be written to loop through all checkboxes after appending and re-check them so it displays. -- NaamanNewbold
SELECT elements (aka listboxes, dropdown lists, selects, multiselects)
Documented Bugs:
Undocumented Bugs:
- BUG: when multiple=true, selectedIndex and value properties are inaccurate with multiple selections
- BUG: when multiple=true, onchange and onpropertychange events do not fire correctly
- BUG: when multiple=true, value property is not updated when programmatically set; e.g. "sel.value=1; (sel.value==1)==false;"
- BUG: when size property>1 or multiple=true, "IE incompletely redraws relative-sized SELECTs during text-size changes":http://throbs.net/web/articles/IE-SELECT-rendering-bug/
Unimplemented Standards:
SELECT drop-list width incorrect for long text when SELECT is fixed width
Setting the width style of a SELECT statement causes the contents of the drop-list to be cropped. Easiest to demonstrate with an example
This is problematic when attempting to limit the width of the select box for layout purposes (say, a fixed-dimensions application UI) whilst still presenting the user with all of the required information to make a choice. -- gyoung
SELECT incorrect behavior using label for="[id]"
When attempting to use the label element if you specify the id of a select and click on the label it will set focus to the select as expected but it will also select the first item in the list. I would think the expected behavior is to just set focus, not change the user's selected answer.
MSDN Bug: http://support.microsoft.com/default.aspx?scid=kb;en-us;314279
Developers fighting with bug this should find the xDOM suite useful. Label.htc is an easy fix until MS does it right. -- Click to read this topic9/14/2004 2:42:49 AM - gulltop
RobEberhardt
SELECT objSelect.add(objOption, null) is not supported by MSIE 6
Reduced testcase showing the bug DU/GT
SELECT (Combo) boxes ignore layers
(Simon Tocker originally reported this, MikeDimmick rewrote the report with technical details)
Drop-down lists (SELECT/INPUT type="SELECT" elements) appear on top of all other elements, regardless of the Z-order specified. This happens because the control used is the Windows combo box control. All other content is rendered by painting directly on the Click to read this topic5/4/2004 1:21:58 AM - jonathanh
WebBrowser control's surface; because the combo boxes are clipped out of the drawing surface, they always appear on top. The general solution used by most sites is to hide the drop-list when layering another element on top.
MSKB 177378 - INFO: How the Z-index Attribute Works for HTML Elements - make this a windowless element, you did it with jframes for IE55! -- Click to read this topic9/14/2004 2:42:49 AM - gulltop
RobEberhardt
This is a particular issue for rich web-application UI development. Although workarounds are available for opaque objects (by layering an jframe beneath the element that needs to be rendered over the control) this does not work when you need a transparent element appearing above the select boxes. One specific use case (although there are probably a few) is when emulating dialogs using divs. Two quick examples - 1. a div-based pseudo dialog that is dismissed when the user clicks outside the visible div (although trapping the click at the document level is possible for this example, it would be nice/easy to do it with a layered div capturing the clicks); 2. a div-based pseudo dialog that is modal (i.e. traps all clicks outside the visible div). The only currently available work-around actually hides the select controls in the page, which is extremely off-putting, even for an experienced net user. -- gyoung
This bug 276228 still applies to IE. The problem is more serious than it may seem, since setting options to select with DOM functions (loop with createElement etc.) is slow. Other workarounds described (outerHTML or surrounding select with div and it's innerHTML) aren't that good since you lose the actual select element properties there. Other (and better) solution for this select problem, would be making DOM functions faster.
After Windows XP SP2 update select element innerHTML is still buggy and DOM functions are slow (they can be up to 30 times slower than innerHTML or 10 times slower than Firefox DOM). -- Mikko "Kosm" Salmi
SELECT: dynamically created SELECT cannot be made multiple without nasty kludge
A SELECT element is created in script using document.createElement("select"), its multiple property is set to true, and its size property is set to a value greater than 1. Although Firefox and Opera correctly display a multiple-line, multiple-selection SELECT, Internet Explorer will still displayed the SELECT as a one-line, one-selection element. This is the case whether those properties are set before or after the element is added to the DOM tree (that is, whether or not the element has a parentNode), as long as they are set in the same script execution context as the element creation.
Examination in a debugger shows that, although the rows property retains the value assigned to it, the multiple property has acquired the value false and the type property has the value select-one.
OPTION elements
Unimplemented Standards:
objOption.defaultSelected = true is not supported
Reduced testcase showing the bug DU/GT
Non-defined value of option is not set to the contents of the OPTION element
Reduced testcase showing the bug
OPTGROUP elements
Unimplemented Standards:
Other (Non-FORM) Elements issues
innerHTML fails in having tabs while style="white-space: pre;" or on <PRE>
When setting the innerHTML-property, all tabs becomes spaces, also if I try 	
Normally this should not be a problem, except when the element contains pre-formatted text.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function body_load() {
// Copies the innerHTML from div1 to div2
document.getElementById('div2').innerHTML=document.getElementById('div1').innerHTML;
// Creating a string with tabs
var htmlcode='Test\t123\t456\t789<br />a\tb\tc\td\te';
// Setting the string in a PRE-element
document.getElementById('pre1').innerHTML=htmlcode;
// Checks the first tab charcode, goes from 9 to 32
alert('htmlcode char 4: '+htmlcode.charCodeAt(4)+'\ninnerHTML char 4: '+document.getElementById('pre1').innerHTML.charCodeAt(4));
}
</script>
</head>
<body onload="body_load();">
<div id="div1" style="white-space: pre;">Test 123 456 789<br />a b c d e</div>
<div id="div2" style="white-space: pre;">empty</div>
<pre id="pre1">empty</div>
</body>
</html>
innerHTML on P fails
Using innerHTML to insert new content into a p tag seems to fail consistently in 6.0.2900.2180.xpsp.050301-1521 on XP Service Pack 26/29/2005 6:01:27 PM - RaiN
SP2. I have a repro case located at http://www.blowery.org/test/innerhtmlandp.html for your enjoyment. Just click on the link and you'll see IE bomb out. I've also seen it silently fail, but I'm yet to come up with a repro case for that.
If you use a div instead of a p, innerHTML works as expected.
This behavior is by design
according to http://msdn.microsoft.com/workshop/author/dyncontent/content.asp
"Can't put invalid HTML in the document: You cannot assign a string to innerHTML or outerHTML that contains invalid HTML. For example, trying to replace the content of the p element with another p will fail. A p element can only contain text and inline elements. However, replacing the entire p element with another p would work just fine."
In your repro case you insert <p> into exististing <p>. Unfortunately similar mistakes break AJAX updaters on IE. -- woid
Bulleted lists
if the first thing in a list item is an image (with float left) followed by some text, the bullet is placed to the right of the image with the text, the bullet should be to the left of the image (firefox does it right)
if the first list item in a bulleted list starts with a definition list it doesn't get a bullet. (Firefox & Opera both get this right)
if an image with float left has a bulleted list to the right of it the bullets don't show (however if there is a 2nd, wider image immediatly below the 1st one & the bulleted list is long enough, the bullets are visible beside the 2nd image). (Firefox & Opera both get this right) -- lightweight
Incorrect heights and widths of tables, cells, and rows. (IE5/5.5 renders this correctly)
<iframe> implementation bug
There seems to be a bug in the implementation of <iframe border="0" frameborder="0" ..> attributes (without the desired effects). Many wrapper applications using IE5/6 as their underlying browser object do not make such a mistake (e.g., Tencent Traveller).
<area> tags added to the DOM programatically are stripped of any attributes
This includes coords, onmouseover, onhover etc. A solution is to add them to the DOM using innerHTML.
insertRow() in iteration loop does not work
Code not working in MSIE 6 for windows but working in Mozilla 1.x and Opera 7+
for(var TotalRows = 0; TotalRows < 5; TotalRows++)
{
var objTRow = objTBody.insertRow(TotalRows);
/* this is the instruction that is not correctly executed by MSIE 6 for Windows;
the return value of insertRow() is never assigned to objTRow */
for(var TotalCols = 0; TotalCols < 5; TotalCols++)
{
var objTCell = objTRow.insertCell(TotalCols);
objTCell.style.border = "2px solid blue";
objTCell.appendChild(document.createTextNode("Row = " + TotalRows + "; Col = " + TotalCols));
};
objTRow.onmouseover = new Function ("evt", "this.style.backgroundColor = '#EEE';");
objTRow.onmouseout = new Function ("evt", "this.style.backgroundColor = 'white';");
};
Reduced testcase showing the problem -- DU/GT
Dynamically created IMG tags can cause IE to freeze
I ran into a (documented) bug a couple of times where creating IMG elements in a page dynamically through the DOM in the onload method causes the page to "freeze". The images are not rendered and the page does not respond for some time (minutes).
The solution was to use setTimeout and create the images after the onload method had completed (even setTimeout with 1ms delay was enough). Like I said it is documented, but it's been around for a while and it was hard to find on MSKB. -- un
META tags improperly "register" them selfs as an ID with document.getElementById()
I ran into a very strange issue where document.getElementById is finding meta tags with the same name as the ID I am searching for, but the proprietary document.all correctly returns the correct node.
<html>
<head>
<meta name="description" content="Test Description">
</head>
<body>
<script type="text/javascript">
function Go() {
var theObj = document.getElementById("Description");
// var theObj = document.all["Description"];
var txtObj = document.getElementById("text");
var txt = '';
for (var attr in theObj) {
txt += "[" + attr + "] = '" + theObj[attr] + "'\n";
}
txtObj.value = txt;
}
</script>
<form action="?">
<button type="button" onclick="Go()">Click Me</button>
<input type="text" id="Description" name="Description">
<br>
<textarea id="text" cols="60" rows="20"></textarea>
</form>
</body>
</html>
click the "Click me" button will return all the attributes of the elemnt with ID description, but the attributes are of the Meta tag with name Description and not the input element with ID of description.
switching from document.getElementById to document.all correctly returns the input element.
Tested in IE 6 SP1 through IE6? What about IE7?5/6/2008 12:50:52 AM - bonovox
IE6 xpSP2
Another test case
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> new document </title>
</head>
<body>
<input name="one" id="two" value="">
<div id="one"></div>
<a href="#" onclick="var a = document.getElementById('one');
var b = document.getElementById('two'); alert(a.id + ' ' + b.id);">Click</a>
</body>
</html>
Testcase showing the problem in an uploaded webpage
Even if Internet Explorer is deliberately letting people get away with using document.getElementById() to access elements by their name, the latter element SHOULD take higher status: document.getElementById() should only search id attributes.
The DOM 2 Core and DOM 3 Core specifications are clearly and definitely NOT implemented correctly here, as they should be
Reduced testcase showing the problem -- DU/GT
Scripting, DOM, DHTML and Events issues
Whitespace-only text node doesn't allow expando properties when preceded only by inline elements
When a block-level element contains one or more inline elements followed by a whitespace-only text node, Internet Explorer will throw an error if a script attempts to create an expando property on the first text node. This is true regardless of what follows the text node, but adding a block-level element before the text node eliminates the problem.
Test case at: http://setmajer.com/demo/text_node_expando_error.html
This currently causes the prototype The most common client side scripting language implemented in many user agents9/7/2007 7:56:27 AM - sdnmin
JavaScript library's Element.cleanWhitespace method ( http://prototype.conio.net/ ) to fail.
See test case at: http://setmajer.com/demo/text_node_extend_error.html
cloneNode() method does not clone all attributes
Among those attributes that are not copied are:
- INPUT.defaultValue
- INPUT.defaultChecked
- OPTION.defaultSelected
If a whitespace-only text node is the first or last child of a block-level element, it is not accessible via the DOM
When a whitespace-only text node is the first or last child of a block-level element, it is not accessible from the DOM.
Test case at: http://setmajer.com/demo/text_node_not_enumerated_error.html
Support lacking for prototyped methods on Element, Object
DOM interfaces like Element don't extend the base Object class like every other class in The most common client side scripting language implemented in many user agents9/7/2007 7:56:27 AM - sdnmin
JavaScript according to the ECMA spec. Therefore, they don't inherit methods from Object's prototype object. -- http://www.ditchnet.org/wp/?p=2
Sample:
Object.prototype.addClass = function(theClass) {
if (this.getAttribute('class')) {
this.setAttribute('class',this.getAttribute('class')+' '+theClass);
} else {
this.setAttribute('class',theClass);
}
}
Object.prototype.removeClass = function(theClass) {
var oldClass = this.getAttribute('class');
var regExp = new RegExp('\\s?'+theClass+'\\b');
if (oldClass.indexOf(theClass) != -1) {
this.setAttribute('class',oldClass.replace(regExp,''));
}
}
"Jscript incrementally becomes slow with large number of objects especially custom objects."
When custom objects are created in memory, as the number of objects increase following happens,
- Time to create new object incrementally increases. This means it would take more time to create objects as you have more number of objects existing in memory, even though object have nothing to do with each other.
- Time to access objects also incrementally increases. This means scripts in page will appear to be slow in doing everything when lot of Jscript objects exists on the page.
To demonstrate this I have created simple test on this page
In the above page, initially it records result 1 & 2, where objects are created and destroyed immediately; it takes 270ms & 240ms on my machine to create 10,000 objects.
Sample code for step 1 & 2
pctr=10000;
i=pctr;
do
{
var o=new obj3();
//objects are created and destroyed since o is automatically destroyed with every loop
o.Method1();
}while( --i);
Now, to demonstrate behavior of Jscript where it goes slower when objects are retained in memory, step 3 actually creates 10,000 objects and puts them in an array. So this means now 10,000 objects are existing in memory.
Sample code for step 3
i=pctr;
var cols=new Array();
do
{
var o=new obj3();
cols.push(o); //objects are now added to collection and not destroyed
o.Method1();
}while( --i);
Now same code which is used for step 1 & 2, which took 270 & 240ms, takes 721ms to create 10,000 objects in step 4 & 5 (in this case also objects are immediately destroyed upon creation). So it clearly shows that just because there is an array of 10,000 objects the creation time of object has gone by 2.6 times. This is just a simple case in reality objects would be very complex and large and things can become slower if anything serious is done with Jscript and IE.
Sample code for step 4 & 5 (note this is same as 1 & 2)
pctr=10000;
i=pctr;
do
{
var o=new obj3();
//objects are created and destroyed since o is automatically destroyed with every loop
o.Method1();
//Just because 10,000 objects exists in an array, the same code takes 2.6 times more to execute
}while( --i);
Although it might not look that this issue will generally cause any performance issue, it can have serious implications on the Jscript based work done on IE, generally it is blamed on large number of document objects but actually issue is with Jscript itself. Jscript team feels that this is related to bad garbage collection implementation in IE, but no committement on if they will fix it. Same thing works very well on Netscape 7.2 and Firefox 1.0 and there is no extra time taken in creation or accessing of object even if large number of objects exists in memory. Infect to my surprise in Firefox and Netscape both creation of objects was much faster, for step 1 & 2 it took 60 & 70ms and for step 4 & 5 it still takes 60 & 80ms"."":http://www.wakacje.agro.pl
---
DOM 3 textContent support: map, hook it to non-standard innerText already supported
textContent attribute is the exact equivalent to MSIE's innerText.
"This textContent attribute returns the text content of this node and its descendants. (...) On setting, any possible children this node may have are removed and, if it the new string is not empty or null, replaced by a single Text node containing the string this attribute is set to. (...)"
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent
So this should be very easy to achieve: just map, hook textContent to innerText.
---
DOM nodeType constant values are not listable, are not accessible
Reduced testcase showing the bug
---
"Operation aborted"
Apparently interacting with innerHTML and possibly using other Click to read this topic8/19/2004 12:24:02 PM - NalaRegeork
JScript functionality causes IE to pop up "Internet Explorer cannot open the Internet site http://example.com. Operation aborted." messages after loading a page. This is sometimes attributed to BHO mal/spyware, but I can confirm it happens with no such software installed. This bug is present in IE SP1 and IE SP2.
http://peterjanes.ca/blog/archives/2003/12/03/hulk-smash
This is generally caused by DOM operations gone wrong,
I was having this problem trying to put some html inside a DIV tag using innerHTML and solved the problem by puting the DIV inside a TABLE.
Sample code for "Operation aborted"
This sample code will give you the "Operation aborted" error in IE6? What about IE7?5/6/2008 12:50:52 AM - bonovox
IE6, while it works as expected in Firefox:
<table>
<tr>
<td>
<script type="text/Javascript">
var d = document.createElement('div');
document.body.appendChild(d);
</script>
</td>
</tr>
</table>
If the script part is moved outside the table it works in both IE6? What about IE7?5/6/2008 12:50:52 AM - bonovox
IE6 and Firefox.
Note from neoprene:
This issue also affects document.write() on documents that are not fully loaded yet. Workaround: avoid document.write().
In MSE7 debugger, the error message is "htmlfile: operation aborted".
Note from netdragon:
This issue also affects document.getElementsByTagName("body")[0].appendChild
Workaround:
You have to wait until onload in order to do document.body.appendChild which is a bug in Internet Explorer's implementation. Do:
if (window.addEventListener) window.addEventListener("load",doOnload,false);
else if (window.attachEvent) window.attachEvent("onload",doOnload);
This should be fixed by Microsoft even though there's a workaround. The workaround may not be applicable in all cases.
Another code for "Operation aborted"
I got the same error. It seems that IE doesn't like when somebody is trying to modify content of "document.body" by adding new elements (previous example) or by modifying its innerHTML (my case). I tried it on IE 6 (Windows 2003 SP1).
<!-- another problematic script -->
<script type="text/Javascript">
document.body.innerHTML+="Something";
</script>
My solution for this is to create "place holder" element and insert all code you want to generate inside this element like this:
<!-- another problematic script -->
<div id="placeHolder"></div>
<script type="text/Javascript">
document.getElementById('placeHolder').innerHTML+="Something";
</script>
setAttribute does not work for changing styles
....
<style type="text/css">
td { background-color: red; }
.green_class { background-color: green; }
</style>
...
<table id="table1" width="50%"><tr><td>This cell should be green</td></tr></table>
<script type="text/Javascript">
var thistable = document.getElementById("table1");
//0,0 - change class
var selectrow = thistable.rows[0].cells[0];
selectrow.setAttribute('class', 'green_class');
}
</script>
Test Case: http://www.richardcunningham.co.uk/ie6bugs/javascript-ie6-bug1a.html
onChange behaviour in input fields
There is a slight problem with the onChange behaviour: it only triggers when you click/select/tab-to another form element.
i.e.: you enter something in a field with a onChange event, and that event doesn't trigger until you focus on another field on the page.
This is not a bug, but works as defined. If you want to detect keypressed, you can use the events: onkeydown, onkeyup, onkeypress and onpaste. Changing the behavior of onchange would break a lot of existing scripts. - Thargol
programmatically changing a value from onChange breaks the onChange event handler.
If you call onChange of a textbox and using javascript set the value of the textbox that was changed back to its defaultValue using code such as:
<html>
<head>
<title>Javascript onChange Bug</title>
<script language="JavaScript">
<!--
function resetTextboxValue(){
alert("onChange was called");
document.forms[0].elements[0].value = document.forms[0].elements[0].defaultValue;
}
//-->
</script>
</head>
<body>
<form>
<input type="text" value="0" onChange="resetTextboxValue();">
</form>
</body>
</html>
This causes the actual value to change but somehow the onChange event detector in the browser doesn't realise that the value has been changed back. If you then click in the text box and change the value once again to what you had before, the onChange is not triggered becuase it things you have left the value alone.
Step by Step process:
- textbox value = 0
- change the value to 3
- onChange triggered calling javascript which sets the textbox value to its defaultvalue (0)
- value now showing as 0
- change the value to 3
- onChange not triggered as it seems to think the value is already 3.
alternatively
- textbox value = 0
- change the value to 3
- onChange triggered calling javascript which sets the textbox value to its defaultvalue (0)
- value now showing as 0
- click in the textbox but do not change the value from 0
- onChange triggered as it seems to think you have changed the value from 3 when you didn't.
onPropertyChange event
The onPropertyChange event does not fire while an element is disabled (regardless of which property). This also includes the act of programmatically setting the element disabled. -- Click to read this topic9/14/2004 2:42:49 AM - gulltop
RobEberhardt
offsetTop reports incorrect value when element gets wrapped
Test case: http://www.kkow.net/etep/bugs/offsettop.html
MSKB 811808 - INFO: offsetTop Property Returns an Incorrect Value When Used in a Table
DOM quirk with parent/child navigation
If a page has a BASE tag with no closing tag, navigating the DOM yields strange and inconsistent results: the BODY element is a child of both HTML and BASE, considering the latter its parent; BASE has a parentNode that is different from its parentElement; BASE has one child but no firstChild. You get the idea.
For a test page see here: http://gauss.dynalias.net/blog/archive/2004/09/04/IEDomQuirk.aspx
Getters and Setters in Javascript
This won't work in IE
<script type="text/javascript">
function Test() { }
Test.prototype = {
justthis:function() {
// normal function
},
// setter
set thing(value) {
throw Error('NOT ALLOWED MWUAHAHA')
},
// getter
get thing() {
return 'BIG WHOPPER';
}
}
var test = new Test();
try {
test.thing = 2;
} catch(e) {
// error
alert(e)
}
alert(test.thing)
</script>
Micha Schopman, micha@mschopman.demon.nl
BASE href ignored in javascript
When using BASE with a href parameter, it seems to be ignored in javascipt, e.g. for add a one or paragraph summary or description of what's discussed here; put yours after 'Summary:'7/13/2005 10:16:05 PM - Loadsgood
URLs passed to window.open.
For an example page, see http://www.theogray.com/c9/base_href.htm -- Theo Gray
Another BASE problem
In an HTML page with a <base> tag that specifies a location on a different server from the one on which the document is located, opening a popup window causes a security exception. This has the side effect that on such a page, the MathPlayer (http://www.dessci.com) splash screen and about box are disabled, as are all tooltip <maction> elements within MathML equations. While this is perhaps not technically a bug in IE, lack of a programmatic way for a Behavior such as MathPlayer to establish trust and open a popup window is a gap in the API that should be addressed.
Popup Windows disable Source and "Text Size" menu items
Popup windows cause the "Source" and "Text Size" menu items in the "View" menu to do nothing. Here is a page that demonstrates the problem.
Rendering issues
Comments causing duplication of displayed information
The following code causes latest IE6? What about IE7?5/6/2008 12:50:52 AM - bonovox
IE6 on WXP and W2K, plus What's known about InternetExplorer Version 75/3/2008 1:28:13 AM - bonovox
IE7 Beta 1 on WXP (only ones tested) to display a second line of characters. The number of comments changes how many characters are duplicated. Any hidden element that I've tried seems to cause this same duplication, but the divs I have included are the minimum required to reproduce the problem.
<html><body>
<div style="width: 750px">
<div style="float: left"></div>
<!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
<div style="float: left; width: 748px">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>
</body></html>
This example can be seen in action at http://www.theogray.com/c9/18148.htm -- Theo Gray
Another example of this, extensively documented
Myriad CSS rendering bugs
IE's CSS bugs are numerous and well-known. For example:
- Peekaboo Bug
- Disappearing List-Background Bug
- Guillotine Bug
- Unscrollable Content Bug
- IE 6 Duplicate Characters Bug
- IE and Italics
- Doubled Float-Margin Bug
- Duplicate Indent Bug
- Three Pixel Text Jog
- Escaping Floats Bug
- Creeping Text Bug
- Missing First Letter Bug
- Phantom Box Bug
But it's easier to simply link for details The weird and wonderful world of Internet Explorer
Drawing errors
Sometimes IE fails to draw some actual text correctly, but selecting the text shows it. Clicking outside the selection sometimes then shows the text properly, but sometimes text that had been displayed correctly before selection and was included in the selection also disappears when clicking outside the selection. I've often seen this on blogs.msdn.com.
The IHTMLPaintSite methods InvalidateRect and InvalidateRgn do not work. IE seems to keep our object's position incorrectly so when we use this interface in MathPlayer (see www.dessci.com), the area invalidated and redisplayed is not where our equation is on the page. MathPlayer works around this by invalidating the object's size instead. However, this causes the document to be reformatted unnecessarily, making interactive response slow.
Other Bundled Technologies
Behaviors and a (maybe) parsing bug
In order to look at this bug, youll need a binary behavior. The bug shows up when using MathPlayer. MathPlayer displays MathML in IE. It can also speak the math, which is kind of cool to listen to. MathPlayer can be downloaded for free from here . This bug almost surely affects all binary behaviors.
The bug is that IE sometimes removes space following the </math> tag. It seems to do so when there is no start tag on the same line. This test page that demonstrates the problem.
Behaviors and Tables
When a MathPlayer object (see "Behaviors and a (maybe) parsing bug") is embedded in a table, it does not cause the scroll bar to appear when the window is narrower than the table's contents. Here is a test page that demonstrates the problem. A possibly related problem is that when a MathPlayer object is in a table which is temporarily made invisible via the CSS visibility property, the MathPlayer object does not reappear when the table is made visible again.
Binary Behaviors
If HTML content which contains attached binary behaviors is dynamically injected into the DOM, these binary behaviors are initialized asynchronously, making it difficult for scripts to interact with any properties or methods exposed by the behaviors since it's not possible to work out when these behaviors have been initialized. In this scenario, the attached binary behaviors should be initialized by MSHTML synchronously.
IE fails to cache the HTC files in memory, and re-requests them from the web server once for each element bound to a behavior.
The extra requests are multiplied by the number of behavior-bound elements, which adds up on pages with many bound elements. In this case, the page can load very slowly, showing the message "xxx Items remaining" (where xxx counts down to zero) in IE's status bar. -- Click to read this topic9/14/2004 2:42:49 AM - gulltop
RobEberhardt
Printing to a Postscript Printer
Printing on a PostScript printer causes the Windows' GDI API TextOut to fail. The printer device context (DC) that IE passes to our behavior (MathPlayer) appears to not be an ordinary printer DC.
IE 6.0 appears to have a resource leak involving the IHTMLAttributeCollection interface. Whenever the "item" method of this interface (or the enumerator interface) is used to get an IDispatchPtr for an attribute item, IE uses a huge amount of memory (eg, 170 Mb instead of 34 Mb for a single page) and "thrashes" the disk, even on computers with plenty of RAM (512 Mb on our test computer). Unfortunately, this is the only way to enumerate an element's explicitly set attributes and, therefore, it is required to perform attribute validation.
Using The most common client side scripting language implemented in many user agents9/7/2007 7:56:27 AM - sdnmin
JavaScript to set location.href to an FTP site causes Passive mode connection
IE 6.0 includes an FTP client. By default, this will connect using Active mode. Howver, if the browser window is pointed to an FTP URL via script, the connection will be made in Passive mode. The effect of this is that the user is presented with the FTP server's default directory listing, rather than the Explorer-style view.
For example: "ftp://ftp.microsoft.com/" will connect in Active mode, whereas "javascript:void(self.location.href='ftp://ftp.microsoft.com')" will connect in Passive mode. The effect is the same whether the location is changed from an event handler or typed directly into the location bar using the "javascript:" protocol. Note also that if one clicks on a directory in the Passive mode listing, the connection is made in Active mode, resulting in the Explorer-style view; hitting the Back button will then present the previously-listed directory in Explorer view.
In case you're wondering why the problem has arisen, I am working on an Intranet site for a client who wants a SELECT to include a number of links to internal FTP servers, with the SELECT taking the punters there via the onchange handler. I know it's bad from a usability point of view, but the client's bigger than us, and that's how they wanted it to work. Now they're maoning about getting the wrong kind of listing. Sigh... -- NickFitz
MSHTML (IE's html-editing engine)
copied links get font-color tag
I've programmed a webbased html editing application based on MS DTHML Editing Control. When copying/pasting content with links (a href=...) the pasted code often contains font color="..." tags which the copy source does not. In these cases the color in the font tag was AFAIK the link color defined in IE settings. For users working with the html editing features this behavior is a bug, so many customers have reported it to me, but I have no good idea how to work around. The described behavior does not happen on all clients, I have no idea what causes it. --- Konni
Relative paths are forced to Absolute
When using ContentEditable=true, the MSHML HTML editing engine breaks links and images with relative paths, making them absolute (assuming the current path). This majorly breaks many content-editing possibilities.
Also documented in HTMLArea component (which uses MSHTML engine) here or here
output HTML
What, is this 1997? How about some decent HTML (e.g. lose the FONT tags!)? CSS has long been standard (heck, let's even pretend it's 2001 -- inline styles would be an improvement). If it's backwards-compatibility you're concerned about, perhaps you could make it switchable (like VS.Net's browser "target schema" option).
Whitespace not preserved when getting the contents of innerHTML
Along the lines of the former "output HTML" comment, getting the contents of an element via innerHTML strips all lines breaks, tabs and spacing between elements. This makes the source difficult to work with using an MSHTML-driven WYSIWYG. This is a very important bug fix since the people using these CMSs are often more naive to the innards of HTML and need well-formatted markup when circumstances call for doing something with the source directly, or the application is being utilized by those with more advanced knowledge of web design.
Undo/Redo breaks when setting innerHTML
In an MSHTML-enabled container (contenteditable="true"), Undo/Redo history is lost whenever the innerHTML property is set.
Dialogs, Modal/Modeless
(note: 'Til Microsoft addresses these bugs, there's a free script include called ssDialogFix which fixes most of them.)
document.title
document.title can be dynamically set after a dialog's page load, but those changes are not reflected in the dialog window's title bar.
window targeting
Default window targeting is broken in dialogs. Instead of targeting the current window (_self) by default, it opens a new window. This problem applies to:
- Hyperlinks (A tags)
- Form submission
- All programmatic interactions:
- window.location = url
- window.location.href = url
- window.location.assign(url)
- window.location.reload(url)
- window.location.replace(url)
- window.navigate(url)
window.opener
This property should point to the window object which opened the dialog.
Keyboard shortcuts
Built-in keyboard shortcuts are disabled in dialogs. Example: F5 and Ctl-R normally reload the document in IE.
Furthermore, dialogs should be dismissable with ESC in Windows.
Context menus
The normal context (right-click) menu is disabled in dialogs. Lost functionality here includes: View Source, Refresh, Add To Favorites, Print, and the Properties dialog. While this may make sense for a dialog, it should be optional, and settable in the method's final "sFeatures" parameter (e.g. enableContextMenu:{ yes | no | 1 | 0 | on | off }, default is no)
Cookies
Cookies are inconsistently available in dialogs.
style.accelerator
The CSS accelerator property is broken in dialogs. It is simply ignored.
Browser Behavior
Alt attributes
Alt attributes are meant to be alternate text to display if the image is broken, not mouse over text as the title attribute is meant. I could post a list of links but I'll just post a link to a post with a list of links: http://www.vbulletin.com/forum/showpost.php?p=668008&postcount=5
Internet Explorer is the only browser in the world that doesn't handle this according to the specification; please fix this. --Shining Arcanine
It's not exactly clear to me from any of the links that Internet Explorer is not handling to specification. Maybe I missed it but is there anything in the World Wide Web Consortium8/22/2007 3:37:21 AM - sdnmin
W3C recommendation that says that tooltips type display of the text is not an acceptable use of the Alt attribute? I think it's an interesting point but often having the tooltip can be a useful addition especially when the image is a hyperlink. Maybe it could be made an optional thing if people find it annoying rather than helpful. --Dave Massy
Dear Mr Massy, this resource The alt and title attributes and this World Wide Web Consortium8/22/2007 3:37:21 AM - sdnmin
W3C Quality Assurance tip on alt attribute cover all of the World Wide Web Consortium8/22/2007 3:37:21 AM - sdnmin
W3C recommendation regarding alt vs title and tooltips. I think it's convincingly clear that MSIE 5+ handles wrongly the alt attribute for image when such image is within a link with a title attribute.
How to Use ALT and TITLE Attributes to Display Additional Information on Hyperlinks (a Microsoft support article) goes on saying: "the browser displays the image (Mom1.jpg) and displays the text 'Picture of Mom' as a ScreenTip when the viewer points to the image" but that is wrong. *alt* should always be perceived and understood only as *text replacement* or *text rendering equivalent*.
How to specify alternate text as explained by HTML 4.01 spec
title should always be perceived and understood as additional info (e.g. if the link will open in a new window) or descriptive info regarding the targeted resource/URL. WAI and J. Nielsen both agree on the purpose and use of title: Using Link Titles to Help Users Predict Where They Are Going
E.g.<a href="[some url]" title="Visit my mom's website!"><img src="[path]/mom.jpg" width="..." height="..." alt="My mom"></a>
and here the text "My mom" should never appear in a tooltip. "My mom" alt attribute value should only serve to graphically replace the image if, for some reason (network, user agent, preference setting), the image can not be rendered. --DU/GT
The 'alt' attribute is for alternate text that should be shown if the image can not be displayed. The 'title' attribute should be used for tooltips. If Internet Explorer stops displaying 'alt' text as tooltips, it will encourage web developers to start using both the 'alt' and 'title' attributes correctly. --taestell
In the short term (that is, with most current browsers), you can cancel the tooltip-behavior of any element's alt attribute value simply by adding title="" to the element in question. (Yeah, it's a small kludge, but it's there.) --Thogek
The biggest problem with this is that amateur developers are using alt= instead of title= in which hurts the experience of people using competing browsers. This is why the specification stated that alt= is for when an image is not shown and title= is for tooltips. If alt= was intended to ever be displayed as a tooltip in addition to being alternate text, there wouldn't have been title=. Additionally, this hurts Accessibility as amateur developers are using alt= in place of title= when alt="" is used in other browsers to tell blind users what they cannot see. Although I suppose that goes back to the user experiences of people using other browsers sentence. --Shining Arcanine
Document length issues
I'm not sure what to call this. The problem is that the scrollbar stops before the actual bottom of the document is reached, making it impossible to scroll to the actual end. This seems to happen with sites with CSS layout, with a sidebar (of links or such). The site I'm currently looking at - http://arcterex.net/blog/ - sets the content to float:right. The scroll height is set to the height of the sidebar, not the whole document. I've seen this problem on a number of blogs.
Zoom style bugs
Specifically when IHTMLStyle3->zoom is greater then 100%:
- Parts of zoomed text cannot be selected by the mouse. For example, if I zoom in 200% on the text "Call me Ishmael.", "Ishmael" cannot be selected with the mouse.
- If zoomed text is set to "contentEditable=true", the caret is the incorrect size. It is the size it would have been if the text was showing at 100%, not 200%
- Using IHTMLElementRender to draw anything zoomed past 100% to a DC doesn't work, portions of the element are not drawn.
Here is some HTML to duplicate the first 2 bugs.
<div style="zoom:200%" contentEditable="true">
Call me Ishmael.
</div>
Named anchors
Jumping to named anchors doesn't always work. When going to a new URL (not jumping inside the same page), it tends to fail at least 50% of the time, depending on page's contents.
For example, this doesn't always work: http://radio.weblogs.com/0001011/2004/11/28.html#a8730
It tends to fail more often if there are pictures of the page, if there is a lot of other content or the connection is slow.
It may be cache related? Does the jump work only when the page is found in IE's cache?
Miscellaneous/Unsure
Cookies and Max-Age
Conforming to http://www.w3.org/Protocols/rfc2109/rfc2109 we should use the Max-Age parameter to specify the cookie lifetime in Set-Cookie header.
But IE seems to expect an Expires parameter. If there is no Expires parameter, the cookie is considered as a session cookie and is deleted when the navigator exits.
Max-Age works perfectly in Firefox.
Edit : actually we should refer to http://wp.netscape.com/newsref/std/cookie_spec.html
-Gruik.
---
Character escaping bug
When escaping a reserved character, particularly for an external scheme, the character is replaced before the URL is passed on to the protocol handler. This causes a problem when the URL is re-parsed, as escaped characters cannot be distinguished from non-escaped, and thus renders the URL invalid.
For example,
random_scheme://host?key=value&key=value_with_%26_escape
is passed to handler as
random_scheme://host?key=value&key=value_with_&_escape
A workaround is possible by escaping the escape character, but this seems a bit over the top. When using other browsers, or Start Menu->Run, the URL is passed on properly escaped.
Javascript alert behavior for different languages
Unlike the Mozilla family of browsers, Internet Explorer ignores the charset information in the meta tag when displaying Javascript alerts. For example, Big5-encoded Traditional Chinese in your call to "alert" will display blocks instead of Chinese characters, unless your Windows (that is, the operating system) language setting is for Chinese (Hong Kong).
Can anyone explain the rationale behind this design decision on the part of Microsoft? Will there be a "fix" in an upcoming version of IE? I'm personally baffled because obviously content in the HTML document renders according to the markup -- so why not the Javascript?
--enrique.pineda
DOM Level 2 Events are unsupported
The WC3 Document Object Model specifications have a full event handling API as part of the level 2 specification. In my testing, I have found that this API is very flexible and is supported by pretty much all web browsers except for Internet Explorer. Adding support for this standard is important for two reasons:
- These events behave different from overriding the keyboard event handlers. Events can be selectively consumed or ignored, thus allowing the application to obtain its events without preventing regular browser hot-keys from operating.
- Because this is a WC3 standard, it is a more "correct" method than overriding the event handlers. Utilizing such a standard should mean that code only needs to be written once for all browsers. Interestingly, this is true of all browsers except MSIE. I am required to have a very ugly "isMSIE" routine to swap out my keyboard handlers for MSIE only.
Considering that this spec is well over four years old, is there any possibility we could get it included in the next version of MSIE?
More Info: http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/
Don't add stuff here - scroll up and find the right category
Page History: