NEW243167
Tables render extra collapsed borders with text-based vertical alignment when cells contain block-level elements
https://bugs.webkit.org/show_bug.cgi?id=243167
Summary Tables render extra collapsed borders with text-based vertical alignment when...
Jordan Pittman
Reported 2022-07-25 08:04:53 PDT
Created attachment 461197 [details] Examples of correct and buggy behavior I checked this bug against Safari 15 *and* the latest Tech Preview. When you have a table that has cells that: 1. Use a text-based `vertical-align` (`text-top`, `baseline`, etc…); and 2. Contain one or more block-level elements; and 3. Have collapsed borders; and 4. Those borders are 1px wide An extra bottom border is rendered just below the bounding box of the text _in addition to_ the expected border where the rows meet. This does cause the text to shift upwards. This extra border is drawn only for the cells that DO NOT have the additional element inside. This behavior happens even when the added element is `position: fixed` or `position: absolute`. Additionally, the initial alignment box for the text is calculated incorrectly if a table initially uses `border-collapse: collapse` versus toggling that property separately via JS. I've provided an example with a handful of small notes and examples of what's happening.
Attachments
Examples of correct and buggy behavior (1.97 KB, text/html)
2022-07-25 08:04 PDT, Jordan Pittman
no flags
Radar WebKit Bug Importer
Comment 1 2022-08-01 08:05:25 PDT
Garrett LeSage
Comment 2 2023-11-27 02:49:56 PST
We're seeing this issue in Cockpit, and it's triggered in all other PatternFly apps using tables as well. It affects WebKit in both Safari and GNOME Web, and becomes much worse when text is zoomed in (especially reloading or revisiting a page after zooming) or when using a browser HiDPI (both in macOS and Linux). PatternFly bug (with screenshots): https://github.com/patternfly/patternfly/issues/5016 Cockpit issue (with screenshots that further illustrate the issue): https://github.com/cockpit-project/cockpit-podman/issues/1485 You can see it in action @ https://www.patternfly.org/components/table/#actions — be sure to zoom (ctrl+) and reload the page or use HiDPI to see the problem more clearly.
Note You need to log in before you can comment on or make changes to this bug.