[Webkit-unassigned] [Bug 271984] New: Table cell borders not sticking with their parent sticky elements

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=271984

            Bug ID: 271984
           Summary: Table cell borders not sticking with their parent
                    sticky elements
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: brandon at dreamthinkbuild.com

When a table contains cells inside sticky parent elements, such as thead, tbody, or tfoot, the borders of the cells do not remain stuck to their parent elements when the table is scrolled. This issue is present in all three major browser engines: Chrome/Chromium, Safari/WebKit, and Firefox/Gecko.

The problem appears to be related to how the browsers handle the sticking behavior of cell borders within sticky parent elements. While the parent elements (thead, tbody, or tfoot) correctly stick to the viewport during scrolling, the borders of their child cells do not maintain their position relative to the sticky parent. Instead, the cell borders appear in their original position and only become visible when the table is scrolled to their respective locations.

This bug affects the visual appearance and layout of tables with sticky headers, bodies, or footers, as the cell borders do not consistently stick with their parent elements during scrolling. The issue is not limited to any specific section of the table and can occur in thead, tbody, or tfoot.

#### Steps to reproduce:

1. Create a table with a thead, body (many rows), and a tfoot.
2. Apply the "position: sticky" property to one or more of the thead, tbody, or tfoot elements.
3. Add borders to the cells within the sticky parent elements.
4. Scroll the table to observe the sticky behavior.

Minimal reproduction: https://codepen.io/brandonmcconnell/pen/ZEZaozw/5952a63864a7d7167c788cec6e03b487

#### Expected result:

The borders of the cells within the sticky parent elements should remain stuck to their parent elements during scrolling, maintaining their position relative to the sticky parent.

#### Actual result:

The borders of the cells within the sticky parent elements do not stick with their parent elements during scrolling. They appear in their original position and only become visible when the table is scrolled to their respective locations.

Please find attached screenshots demonstrating the issue in Chrome/Chromium, Safari/WebKit, and Firefox/Gecko.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240401/6a241067/attachment-0001.htm>