{"id":3335,"date":"2014-03-20T12:24:10","date_gmt":"2014-03-20T18:24:10","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3335"},"modified":"2014-03-20T12:24:25","modified_gmt":"2014-03-20T18:24:25","slug":"ie11-bug-with-ranges","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2014\/03\/20\/ie11-bug-with-ranges\/","title":{"rendered":"IE11 bug with <code>Range<\/code>s"},"content":{"rendered":"<p><a href=\"http:\/\/jsfiddle.net\/6WknW\/4\/\">Try the demo<\/a> in Internet Explorer 11 and in a real browser.<\/p>\r\n<p>IE now implements <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ie\/hh772133(v=vs.85).aspx\">Range<\/a> objects, representing a range of text that may span several elements. It's the basis for the standards-based part of <a href=\"http:\/\/bililite.com\/blog\/2011\/01\/17\/cross-browser-text-ranges-and-selections\/\" title=\"Cross-Browser Text Ranges and Selections\">bililiteRange<\/a>. And it almost works. It's a little flaky: inserting text that contains <code class=\"language-javascript\" >'\\n'<\/code> without <code class=\"language-javascript\" >'\\r'<\/code>, what I consider the \"normal\" way, automatically inserts the <code class=\"language-javascript\" >'\\r'<\/code>. Then using <code class=\"language-javascript\" >node.nodeValue<\/code> returns a string <em>without<\/em> the <code class=\"language-javascript\" >'\\r'<\/code>, but <code class=\"language-javascript\" >Range.toString()<\/code> includes them. But that I can hack around.<\/p>\r\n<p>The real bug is that ranges cannot end with a <code class=\"language-javascript\" >'\\n'<\/code>. If you try, the range is truncated. I can't find any way around that, so I had to change the way bililiteRange returned text: I went from <code class=\"language-javascript\" >range.toString()<\/code> to <code class=\"language-javascript\" >element.textContent.slice()<\/code>. Since that works with no other changes, I suspect that the error is in IE's <code class=\"language-javascript\" >toString()<\/code> function itself rather than reflecting an underlying error in the <code class=\"language-javascript\" >Range<\/code>.<\/p>\r\n<p>Now to <a href=\"https:\/\/connect.microsoft.com\/IE\/feedback\/details\/837453\/range-object-drops-final-newlines\">report that to Microsoft<\/a>.<\/p>\r\n","protected":false},"excerpt":{"rendered":"Try the demo in Internet Explorer 11 and in a real browser. IE now implements Range objects, representing a range of text that may span several elements. It's the basis for the standards-based part of bililiteRange. And it almost works. It's a little flaky: inserting text that contains '\\n' without '\\r', what I consider the [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3335"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=3335"}],"version-history":[{"count":5,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3335\/revisions"}],"predecessor-version":[{"id":3340,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3335\/revisions\/3340"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}