The getBoundingClientRect returns two values.

I want to get the size of the element of the word "issue" in first <div id="portlet" class="content"> element (line 6 of HTML Source )and its position relative to the viewport.

So, I used the get the Element.getBoundingClientRect().
But, the method returns two values in different situations.

For example, it returns a wrong value right after the webpage involving the elements opens initially, while it returns a correct value after touching some elements in the element of "portlet".

I think this appears in Safari 13.1.2 of both Mac and iPad.

How can I get a correct value of it?

Is this a bug?

JS source

Code Block language
// select word “issue” and set range
var textNode = document.getElementById("portlet").childNodes[6];
var range = document.createRange();
range.setStart(textNode, 29);
range.setEnd(textNode, 34);
// get bounds
bounds = range.getBoundingClientRect();

Results

Code Block language
// Correct Result
bounds -> {bottom: 277.953125, height: 21, left: 378.5, right: 420.9375, top: 256.953125, width: 42.4375, x: 378.5, y: 256.953125}
// Wrong result
bounds -> {bottom: 297.953125, height: 41, left: 171.5, right: 420.953125, top: 256.953125, width: 249.453125, x: 171.5, y: 256.953125 }

HTML Source

Code Block language
<div id="topwide">
			<div id="portlet" class="content">
				<img src="img/webrtc.png" align="left"> 
				<h1>Web RTC</h1>
				<br>
				WebRTC will address the issue head on. But, there is an important hurdle that must first be cleared, and that's standardizing on a common video codec for real-time communications on the web 
			</div>
			<div id="portlet" class="content">
				<img src="img/h264.png" align="left"> 
				<h1>Video</h1>
				<br>
				We do video transcoding from VP8 to H.264.
			</div>
			<div id="portlet" class="content">
				<img src="img/toolbox.png" align="left"> 
				<h1>SDKs</h1>
				<br>
				The Software Developer Kit (SDK) makes it easier for Web developers to format and deliver content to the phone by providing Web server components
			</div>
		</div>

CSS source

Code Block language
#topwide {
    width: 930px;
    height: 300px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
shortcode.css:4
.mb_wrapper div {
    box-sizing: content-box;
}
user agent stylesheet
div {
    display: block;
}
#portlet {
    margin-left: 10px;
    width: 260px;
    height: 250px;
    display: block;
    float: left;
}
shortcode.css:4
.mb_wrapper div {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
style.css:159
.content {
    border-collapse: collapse;
    color: rgb(82, 82, 82);
    background: #EEE;
    display: block;
    font-family: arial, helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 255px;
    line-height: 20px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    width: 340px;
    zoom: 1;
}