Bug 291407

Created attachment 474896 [details] We are using absolutely positioned pseudo-elements on the <tr> to render a vertical line and circle beside each row for visual hierarchy. This layout works correctly in most browsers (see Other Browse WHAT: When applying position: relative to a <tr> element and using absolutely positioned pseudo-elements (e.g., ::before, ::after) inside it, Safari fails to contain those pseudo-elements within the row's boundaries. This causes layout inconsistencies in Safari compared to other browsers (Chrome, Firefox, Edge), where the pseudo-elements remain properly bounded within the table row. We use a vertical line and a circle for visual markers alongside each <tr> via ::before and ::after. These are positioned absolutely relative to the <tr>. In Safari, these pseudo-elements render incorrectly — they overflow outside the row, not aligning visually with their associated content. STEPS TO REPRODUCE: 1: Create a <table> with multiple <tr> elements. 2: Add position: relative to the <tr>. 3: Add ::before or ::after pseudo-elements with position: absolute and some content (e.g., a vertical line or shape). 4: Observe the rendering in Safari vs. other browsers. EXPECTED BEHAVIOR (OTHER BROWSERS): The absolutely positioned pseudo-elements are bounded by their parent <tr> and align visually as expected. ACTUAL BEHAVIOR (SAFARI): The pseudo-elements overflow or misalign because Safari doesn't treat <tr> as a positioning context when position: relative is applied. ENVIRONMENT: Safari Version: Version 18.3 (20620.2.4.11.5) macOS Version: 15.3.1 (Sequoia) Tested also on: Chrome, Firefox — works correctly