Range getBoundingClientRect() top incorrect in Internet Explorer 11

Question

I'm using a Range object and Element.getBoundingClientRect() to calculate the position of some text. I'm getting the expected result in Chrome and Firefox but in IE the top property value is wrong.

To be more specific the text in contained within a span element with a line-height value. This crude fiddle illustrates the issue https://jsfiddle.net/eekr4qhs/

Example HTML

<div style="display:inline-block; width:100px;height:500px; background-  color:red">
    <span id="span1" style="line-height:500px">
        text
    </span>
</div>

code snippet

var spanEl = document.getElementById("span1");
var textNode = spanEl.childNodes[0]; 
var offsetStart = 0;
var offsetEnd = textNode.nodeValue.length || 0;

var range = document.createRange();
range.setStart(textNode, offsetStart);
range.setEnd(textNode, offsetEnd);

var rect = range.getBoundingClientRect();
console.log(rect.top);

It appears that IE does not consider the line height property value when calculating the range's DOMRect

If I open the fiddle in Chrome I get 249.09722900390625 for the rect's top whereas in IE 11, top is 8

Has anyone seen this issue before and is there someway to get IE to return the correct bounding client rect for the range?