range.getClientRects() is returning rectangles with 0 width and height.Works fine in Firefox and Chrome.

I have a requirement where i have to fetch all the client rectangles enclosing a selection in UI .

My texts are placed in absolute position divs in DOM and code look something like this .

    <div class="textDiv" style="; font-size: 18px; font-family: sans-serif; left: 422.178px; top: 10.523px; transform: rotate(0deg) scale(1.04982, 1); transform-origin: 0% 0% 0px ;overflow:hidden" dir="ltr">FIRST</div>
       
   <div class="textDiv" style="; font-size: 18px; font-family: sans-serif; left: 530.61px; top: 10.523px; transform: rotate(0deg) scale(1.05114, 1); transform-origin: 0% 0% 0px; overflow:hidden" dir="ltr">LINE</div>

For the above code when I do a text selelction enlosing "FIRST LINE" as selected text  .And use below code i get invalid rectangles .

var sel = document.selection, range;
var width = 0, height = 0;
if (sel) {
if (sel.type != "Control") {
range = sel.createRange();
var rects=range.getClientRects();

}