Breaking change on height(Upgrading from 3.5.1 to 3.6/3.7)

[parallels999]

Using .height() is rounding the value

• What do you expect to happen?
  get the real height
• What actually happens?
  the browser shows the real height but jquery get it rounded
• Which browsers are affected? tested on
  chrome 114.0.5735.110
  opera 99.0.4788.65
  chromium:113.0.5672.127
  edge 114.0.1823.43
  firefox 103.0.2

Description

having rounded height produces misaligned objects

V3.5:

V3.6/V3.7:

Link to test case

Same code, just different versions of jquery
V3.7.0: https://jsfiddle.net/6jqh4pmb/1/ (fails)
V3.6.4: https://jsfiddle.net/6jqh4pmb/2/ (fails)
V3.5.1: https://jsfiddle.net/6jqh4pmb/3/ (This is working fine)

[parallels999]

UPDATE:

Apparently this issue is shown when using bootstrap(3/4/5), bootstrap add this css:

* { box-sizing: border-box; }

jQuery works again if i add this css

tr { box-sizing: content-box; }

but since this worked correctly in 3.5.1 for me it is a bug,
It also fails with other css plugins, but I haven't figured out which styling affects it.

Working Demo: https://jsfiddle.net/hc3ym1Lt/
Failing Demo: https://jsfiddle.net/hc3ym1Lt/1/
Without Bootstrap Demo: https://codepen.io/parallels999/pen/WNYwxVG

[timmywil]

Thanks for opening an issue! It turns out our support test is not accounting for global border-box box-sizing. We can fix this by fixing the support test.

[mgol]

Note: we will fix it only in Chrome & Safari. In Firefox & IE it will remain an integer. This is because those browsers fail the reliableTrDimensions support test and we need to use outerHeight as a workaround - which does not return fractional values.

If Firefox ever starts passing the support test, it will automatically get fractional values here.

[mgol]

PRs:

• main (4.x): CSS: Make the reliableTrDimensions support test work with Bootstrap CSS #5278
• 3.x-stable: CSS: Make the reliableTrDimensions support test work with Bootstrap CSS (3.x version) #5279