Bug 210539 – Floating-Point CSS height/width percentages not calculated correctly by Safari in Table

• Component: Tables
• Status: NEW

Created attachment 396512 [details]
HTML Examples

When floating point percentages (which add up to < 100%) are used to specify the height of table rows with 10+ rows, their heights are not calculated correctly and the last elements are rendered on top of each other.

This was reproduced in Safari on macOS (13) and iOS (13 & 12).

Steps to reproduce the problem:
1. Open either of "FloatingPoint_HeightWidthPercentages_CalculatedIncorrectly.html" or "FloatingPoint_HeightWidthPercentages_CalculatedIncorrectly_LowerPrecision.html"
2. Notice that the last two table elements "Unclassified" and "Confidential" are rendered on top of each other.

I have also attached a simplified Table that also reproduces the issue which is easier to see visually.

Note: This is not an issue in Firefox or Non-Chrome-Based Edge.
 
The issue that is present in Safari has the same erroneous behaviour that chrome exhibits here:
https://bugs.chromium.org/p/chromium/issues/detail?id=1068931

Created attachment 396513 [details]
Simplified Example

[Radar WebKit Bug Importer]

<rdar://problem/61857920>

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6.1 on macOS 12.5.1 using "Simplified test case", where the table does not show "Second to last (Number 13)" and "Last (Number 14)" whereas other browsers Chrome Canary 106 and Firefox Nightly 105 do show these two rows. Plus only Safari is showing "Scrollbar" (height was same for all browsers). Thanks!