Problems in getting elements outerHeight in IE Edge using jQuery

Question

I have a couple of elements inside a preview <div>. I need to add up their outerHeights (NOT the total height of the preview <div>). If height of elements reaches e.g. 300px, I need to trigger some action.

Firefox and Chrome are doing this well. IE Edge seems to add an additional line height per element. I figured out that this is because of <br /> tags at the end of each element. Seems they are handled as an additional line of text in Edge.

Comparing the boxes height in photoshop, I can see, that Firefox and Chrome are right. Edge counts much more height in total, than is visible.

I'm not able to manipulate the variable text inside my preview <div>. Does anyone have an idea, how to fix it using jquery or javascript?

My html:

<div class="preview">
  <span>Lorem ipsum, <br/></span>
  <span><br/></span>
  <span>Lorem ipsum doilor sit amet <br/></span>
</div>

<input type="text" id="t" value="0">

My jQuery:

var ct = 0;
$('.preview').children().each(function() {
    ct = ct+$(this).outerHeight(true);     // 'true' for including margins
});
$('#t').val(ct+"px - total height");

Please have a look on my fiddle in Chrome/firefox and compare to IE Edge

https://jsfiddle.net/e3adkvmq/3/

What version of Edge? Edge-Chromium 84.0.522.59? or the *legacy* one? Have you updated Edge recently? — Roko C. Buljan, Aug 14 '20 at 12:33
Whoops... Currently using 44.18362.449.0 - I'll do an update. But problem would be, that some users (reported that bug) may also use older versions... — Jimbo Jambo, Aug 14 '20 at 12:42
Indeed strange bug, tried your code on IE11 and seems that the heights are counted up for "empty" elements that contain `
`. I still don't understand what is your end goal, counting heights of inline or inline-block elements is quite odd (well, unless your elements are defined as display block in CSS)... I really don't understand the purpose if your task. Given that, there might be other solutions - making this for now an *XY Question* — Roko C. Buljan, Aug 14 '20 at 12:46
Okay, works with Edge Chromium. It solves my problem in so far, that I can tell single users to upgrade their Edge. Thanks for this hint — Jimbo Jambo, Aug 14 '20 at 13:05

score 0 · Answer 1 · answered Aug 17 '20 at 06:31

I can see that you are having an issue with the MS Edge legacy browser.

I make a test with your sample code and I can produce the issue on my end. I try to find the solution to this issue but there is no solution available for this issue.

As a workaround, you can try to add white-space: pre; to the .preview CSS class and remove the br tags from the HTML code. It will not give you the exact same value as other browsers but it can help to minimize the difference.

Modified code:

<!doctype html>
<html>
<head>
<style>
.preview { line-height: 14px; font-size: 12px; border: 1px solid #c00;white-space: pre; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var ct = 0;
$('.preview').children().each(function() {
    console.log(ct);
    console.log($(this).outerHeight(true));
    ct = ct+$(this).outerHeight(true);
});

$('#t').val(ct+"px - total height");
});
</script>
</head>
<body>
<h4>Counting up height of Elements inside red bordered div</h4>

<div class="preview">
  <span class="intro-breaker">Lorem ipsum,</span>
  <span class="intro-breaker"></span>
  <span class="intro-breaker">Lorem ipsum doilor sit amet</span>
  <span class="intro-breaker">Lorem ipsum sit amet dolores eunt sunt. Lorem ipsum sit amet dolores eunt sunt. Lorem ipsum sit amet dolores eunt sunt. Lorem ipsum sit amet dolores eunt sunt.</span>
  <span class="intro-breaker"></span>
  <span class="intro-breaker">Lorem ipsum doilor sit amet</span>
</div>

<input type="text" id="t" value="0">
</body>
</html>

Output in the MS Edge legacy browser:

You can try to press the ALT + J key in the MS Edge legacy browser and try to provide the feedback about this issue to Microsoft.

As other community members had already informed you, you can suggest your customers upgrade to the new MS Edge chromium-browser to avoid this issue.

Problems in getting elements outerHeight in IE Edge using jQuery

1 Answers1