Here is the code snippet provided. If you click on "Run code snippet" button, you will see the output:
1 - p.getClientRects().length
2 - span.getClientRects().length
However, if you expand the snippet first and then run it, you will notice a slight difference in the result:
1 - p.getClientRects().length
1 - span.getClientRects().length
I am trying to understand the behavior of the Element.getClientRects() method. This inconsistency is puzzling to me. Can anyone clarify why this discrepancy occurs?
Browser used: Chrome Version 67.0.3396.99 (Official Build) (64-bit)
var p = document.querySelector('p');
var span = document.querySelector('span');
console.log(p.getClientRects().length, "- p.getClientRects().length");
console.log(span.getClientRects().length, "- span.getClientRects().length");p {
border: 1px solid green;
}
span {
border: 1px solid red;
}<p>
This is a paragraph with
<span>Span Element having a looooooooooooooooooooooo nnnnnnnnnnnnnnnnnnnn ggggggggggggggggg text</span>
</p>