Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why Does IE11 Handle Node.normalize() Incorrectly for the Minus Symbol?

I have been experiencing an issue where DOM text nodes with certain characters behave strangely in IE when using the Node.normalize() function to concatenate adjacent text nodes.

I have created a Codepen example which allows you to reproduce the bug in IE11: http://codepen.io/anon/pen/BxoKH

Output in IE11: '- Example'

Output in Chrome and earlier versions of IE: 'Test - Example'

As you can see, this truncates everything prior to the minus symbol which is apparently treated as a delimiting character, apparently due to a bug in the native implementation of normalize() in Internet Explorer 11 (but not IE10, or IE8, or even IE6).

Can anyone explain why this happens, and does anyone know of other sequences of characters which cause this issue?

Edit - I have written a codepen that will test sections of Unicode characters to identify characters that cause this behavior. It appears to affect many more characters than I originally realized:

http://codepen.io/anon/pen/Bvgtb/ This tests Unicode characters from 32-1000 and prints those that fail the test (truncate data when nodes are normalized) You can modify it to test other ranges of characters, but be careful of increasing the range too much in IE or it will freeze.

I've created an IE bug report and Microsoft reports being able to reproduce it based on the code sample I provided. Vote on it if you're also experiencing this issue: https://connect.microsoft.com/IE/feedback/details/832750/ie11-node-normalize-dom-implementation-truncates-data-when-adjacent-text-nodes-contain-a-minus-sign

like image 502
JessieArr Avatar asked Mar 11 '14 21:03

JessieArr


1 Answers

The other answers here are somewhat verbose and incomplete — they do not walk the full DOM sub-tree. Here's a more comprehensive solution:

function normalize (node) {
  if (!node) { return; }
  if (node.nodeType == 3) {
    while (node.nextSibling && node.nextSibling.nodeType == 3) {
      node.nodeValue += node.nextSibling.nodeValue;
      node.parentNode.removeChild(node.nextSibling);
    }
  } else {
    normalize(node.firstChild);
  }
  normalize(node.nextSibling);
}
like image 112
Joseph Avatar answered Oct 11 '22 06:10

Joseph