Bug 246495 – table tr borders render incorrectly

• Component: Tables
• Status: RESOLVED CONFIGURATION CHANGED

[Darin Senneff]

Created attachment 462973 [details]
Screen recording - table tr border issue

When a table tr element has a border applied to it with CSS, the size and placement of that row and its border does not render correctly (see the attached screen recording for a visual). It seems that including elements such a button in the table causes the issue, as tables without those elements do not have the issue.

Demo page: https://codepen.io/dsenneff/pen/vYjbQYm/91d48ea673dcb4fd7c09e43be2b83384
Demo page (without CodePen wrapper): https://cdpn.io/pen/debug/vYjbQYm/91d48ea673dcb4fd7c09e43be2b83384

To replicate:
1. Load the demo page linked above.
2. Observe the top-border of several rows in the first table have rendering issues. The second table does not have any issues. 
3. Using the browser inspector, toggle off-and-on the top-border style. 
4. Observe how the table renders different as the top-border is turned on-and-off.

[Radar WebKit Bug Importer]

<rdar://problem/101406586>

[Darin Senneff]

Issue still present in Safari 16.1 on both MacOS and iPadOS.

[Ahmad Saleem]

I am not able to reproduce this issue in Safari Technology Preview 163 and WebKiT ToT and it does not have glitch like screen recording, which is still present in Safari 16.3.

It seems with Safari 16.4, it might be fixed, if it is as far as STP163.

Marking this as "RESOLVED CONFIGURATION CHANGED". Thanks!