Internet Explorer getClientRects absolute positioned elements

Question

I'm currently experiencing an issue with text selection in IE 11 (though it happens in previous IEs as well). My goal is to get text selection working where it returns to me the getClientRects. What I have is a simple setup. I have a container div and within that div I've placed two spans:

<div onmouseup="mouseup()" id="container">
    <div class="span1">Span 1</div>
    <div class="span2">Span 2</div>
</div>

Both spans are positioned absolutely to the top/left and bottom/right corners. The container has a height of 100px;

On mouse up this function is ran:

function mouseup(){
    var selectObj = ((window.getSelection)?window.getSelection():document.getSelection());
    alert(selectObj.getRangeAt(0).getClientRects().length);
}

On chrome if you try to select the text from span 1 to span 2 it will alert a length of 3, which is what I want as that lets me know where the bounding boxes are for the text selection. On internet explorer though it always returns 0. If I select text only within a single span it will work, but as soon as you go to multiple it fails.

Here is a jsFiddle of this all set up: http://jsfiddle.net/v6sa71hs/

Answer 1

Looks like you just can't do it that way. If you instead tell everything to float and then position it with margin-top/left it will work. Here is the css for both spans

span{
    float: left;
    margin-bottom: -100%;
    margin-right: -100%;
}

Updated fiddle: http://jsfiddle.net/9gemwtc5/