Skip to content

Odd bug with document ranges and selections

I use Range and Selection extensively in bililiteRange in regular elements in standards-based browsers. I initially implemented scrolling a range by inserting an empty element, using scrollIntoView on that, then deleting the element.

But it turns out adding and removing elements messes up the selection. So I had to change it to manipulate scrollTop directly.

It's an odd bug, seeming random. In the following (in a "real" browser, Chrome or Firefox) double click on some words, click the button and watch the selection change. Selecting the same text with clicking and dragging does not. I'm not sure what is going on.

<pre class=selectiontest contenteditable>
	<strong>First</strong> line.
	<em>Second</em> line.
	Third line.
</pre>
<button class=selectiontest >Modify selection</button>
function selectionSize(){
	return window.getSelection().getRangeAt(0).toString().length;
}
document.querySelector('button.selectiontest').addEventListener('click', function(){
	var sel = window.getSelection().getRangeAt(0);
	console.log(selectionSize());
	var span = document.createElement('span');
	sel.insertNode(span);
	span.parentNode.removeChild(span);
	document.querySelector('pre.selectiontest').focus();
	console.log(selectionSize());
});

This has been mentioned elsewhere but no reasons, just workarounds.

Post a Comment

Your email is never published nor shared. Required fields are marked *