Why does the same code using getClientRects() produce different results?

I have the code snippet below.
If you press "Run code snippet" then you will see the following

1 - p.getClientRects().length

2 - span.getClientRects().length

But if you press "Expand snippet" at first, and then "Run code snippet" then you will see a bit different result:

1 - p.getClientRects().length

1 - span.getClientRects().length

I just want to understand Element.getClientRects() method. But this situation crashes me. Could you explain why it produces different results?

My browser is: 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>

edited Dec 9 at 10:50

Temani Afif

64.5k93675

asked Dec 9 at 9:57

Roman Roman

30711

2

Just for the record, I get 3 - span.getClientRects().length. Running Firefox on Linux. It is to do with font sizes and element rendering.
– Tigger
Dec 9 at 10:02

add a comment |

I have the code snippet below.
If you press "Run code snippet" then you will see the following

1 - p.getClientRects().length

2 - span.getClientRects().length

But if you press "Expand snippet" at first, and then "Run code snippet" then you will see a bit different result:

1 - p.getClientRects().length

1 - span.getClientRects().length

I just want to understand Element.getClientRects() method. But this situation crashes me. Could you explain why it produces different results?

My browser is: 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>

edited Dec 9 at 10:50

Temani Afif

64.5k93675

asked Dec 9 at 9:57

Roman Roman

30711

2

Just for the record, I get 3 - span.getClientRects().length. Running Firefox on Linux. It is to do with font sizes and element rendering.
– Tigger
Dec 9 at 10:02

add a comment |

I have the code snippet below.
If you press "Run code snippet" then you will see the following

1 - p.getClientRects().length

2 - span.getClientRects().length

But if you press "Expand snippet" at first, and then "Run code snippet" then you will see a bit different result:

1 - p.getClientRects().length

1 - span.getClientRects().length

I just want to understand Element.getClientRects() method. But this situation crashes me. Could you explain why it produces different results?

My browser is: 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>

edited Dec 9 at 10:50

Temani Afif

64.5k93675

asked Dec 9 at 9:57

Roman Roman

30711

I have the code snippet below.
If you press "Run code snippet" then you will see the following

1 - p.getClientRects().length

2 - span.getClientRects().length

But if you press "Expand snippet" at first, and then "Run code snippet" then you will see a bit different result:

1 - p.getClientRects().length

1 - span.getClientRects().length

I just want to understand Element.getClientRects() method. But this situation crashes me. Could you explain why it produces different results?

My browser is: 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>

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>

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>

javascript html css

edited Dec 9 at 10:50

Temani Afif

64.5k93675

asked Dec 9 at 9:57

Roman Roman

30711

edited Dec 9 at 10:50

Temani Afif

64.5k93675

asked Dec 9 at 9:57

Roman Roman

30711

edited Dec 9 at 10:50

Temani Afif

64.5k93675

edited Dec 9 at 10:50

Temani Afif

64.5k93675

edited Dec 9 at 10:50

Temani Afif

64.5k93675

asked Dec 9 at 9:57

Roman Roman

30711

asked Dec 9 at 9:57

Roman Roman

30711

asked Dec 9 at 9:57

Roman Roman

30711

2

Just for the record, I get 3 - span.getClientRects().length. Running Firefox on Linux. It is to do with font sizes and element rendering.
– Tigger
Dec 9 at 10:02

add a comment |

2

Just for the record, I get 3 - span.getClientRects().length. Running Firefox on Linux. It is to do with font sizes and element rendering.
– Tigger
Dec 9 at 10:02

Just for the record, I get 3 - span.getClientRects().length. Running Firefox on Linux. It is to do with font sizes and element rendering.
– Tigger
Dec 9 at 10:02

add a comment |

1 Answer
1

active

oldest

votes

Un-expanded, the text wraps, so you have two separate rectangles:

enter image description here

Expanded, the text all fits on one line, so you have only one rectangle:

enter image description here

edited Dec 9 at 10:06

answered Dec 9 at 10:00

T.J. Crowder

676k12011961291

Excellent! You also solved my problem with understanding getClientRects() method
– Roman Roman
Dec 9 at 10:07

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53691154%2fwhy-does-the-same-code-using-getclientrects-produce-different-results%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Un-expanded, the text wraps, so you have two separate rectangles:

enter image description here

Expanded, the text all fits on one line, so you have only one rectangle:

enter image description here

edited Dec 9 at 10:06

answered Dec 9 at 10:00

T.J. Crowder

676k12011961291

Excellent! You also solved my problem with understanding getClientRects() method
– Roman Roman
Dec 9 at 10:07

add a comment |

Un-expanded, the text wraps, so you have two separate rectangles:

enter image description here

Expanded, the text all fits on one line, so you have only one rectangle:

enter image description here

edited Dec 9 at 10:06

answered Dec 9 at 10:00

T.J. Crowder

676k12011961291

Excellent! You also solved my problem with understanding getClientRects() method
– Roman Roman
Dec 9 at 10:07

add a comment |

Un-expanded, the text wraps, so you have two separate rectangles:

enter image description here

Expanded, the text all fits on one line, so you have only one rectangle:

enter image description here

edited Dec 9 at 10:06

answered Dec 9 at 10:00

T.J. Crowder

676k12011961291

Un-expanded, the text wraps, so you have two separate rectangles:

enter image description here

Expanded, the text all fits on one line, so you have only one rectangle:

enter image description here

edited Dec 9 at 10:06

answered Dec 9 at 10:00

T.J. Crowder

676k12011961291

edited Dec 9 at 10:06

answered Dec 9 at 10:00

T.J. Crowder

676k12011961291

answered Dec 9 at 10:00

T.J. Crowder

676k12011961291

answered Dec 9 at 10:00

T.J. Crowder

676k12011961291

Excellent! You also solved my problem with understanding getClientRects() method
– Roman Roman
Dec 9 at 10:07

add a comment |

Excellent! You also solved my problem with understanding getClientRects() method
– Roman Roman
Dec 9 at 10:07

Excellent! You also solved my problem with understanding getClientRects() method
– Roman Roman
Dec 9 at 10:07

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr