Table row height reported incorrectly in Edge

[TPIvan]

Description

When css height is specified on tr element (<tr id="myrow" style="height:1px;">) .height() returns this height instead of actual height. The problem is present in Microsoft Edge (42.17134, 44.18362) but not present in Google Chrome ( 77.0.3865.90 ) and Mozilla Firefox (69.0.1). The problem is present since jquery 3.3.0 and was reproduced on earlier versions. And is present on current git version (4.0.0-pre 50871a5)

How to reproduce. Create a table with one row (tr) and one cell (td) with text in the cell. Set the row height to 1px (style="height:1px;"). JQuery .height() on the row should return at least font height but actually returns 1 in Edge.

Link to test case

https://codepen.io/TPIvan/pen/aboxZaQ

[mgol]

Thanks for the issue & the test case! I recreated it on JS Bin as CodePen doesn't support IE: https://output.jsbin.com/xusurij/1.

The issue exists on IE 9-11 10-11 (IE 9 looks fine) as well.

[mgol]

The issue is that getComputedStyle on a tr with height set via inline styles returns that inline style, disregarding the internal contents. getBoundingClientRect doesn't have that issue, neither does offsetHeight. In IE/Edge we seem to have a choice between occasionally incorrect height on table rows and losing fractional values on those rows.

[gibson042]

getBoundingClientRect is the wrong tool for the job of CSS box model introspection, and we were right to abandon it. But offset{Width,Height} seem like acceptable graceful degradations to use.

[hichemsmairia]

whats the problem here guys

[timmywil]

@hichemsmairia @mgol describes the issue above. IE10, 11, and Edge report the wrong value using getComputedStyle in this use case. We are considering using offset{Width,Height} instead, but it does have the downside of rounding to the nearest whole number value.

[mgol]

PR for 3.x-stable: #4503