| Summary: | table element 'overflow:clip' is not applied to nested table elements (thead, tr, td, etc) with a background-color | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Pierre Ossman <ossman> | ||||||||
| Component: | CSS | Assignee: | Rob Buis <rbuis> | ||||||||
| Status: | RESOLVED FIXED | ||||||||||
| Severity: | Normal | CC: | karlcow, twisniewski, webkit-bug-importer, zalan | ||||||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||||||
| Version: | Safari 16 | ||||||||||
| Hardware: | Unspecified | ||||||||||
| OS: | Unspecified | ||||||||||
| See Also: | https://github.com/web-platform-tests/wpt/pull/40624 | ||||||||||
| Attachments: |
|
||||||||||
It is possible to work around this using some ugly CSS like:
tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
But it quickly becomes ugly when considering variations on <thead>, <tbody> and <tfoot>.
Created attachment 464917 [details]
safari, firefox, chrome
Rendering in Safari TP, Firefox Nightly, Chrome Canary
latest versions
Created attachment 464918 [details]
rendering with outlines
putting a yellow outline on the table element
and a red outline on the thead element
we can better see what is happening.
Pull request: https://github.com/WebKit/WebKit/pull/14078 Committed 264849@main (0e5a15b84122): <https://commits.webkit.org/264849@main> Reviewed commits have been landed. Closing PR #14078 and removing active labels. Might the WPT in this patch be pushed to the main repo? It would be nice to have it on wpt.live. (In reply to Thomas Wisniewski [:twisniewski] from comment #8) > Might the WPT in this patch be pushed to the main repo? It would be nice to > have it on wpt.live. Thanks for the heads up, I forgot to land the test in wpt, should be fixed now. No worries, thanks! |
Created attachment 464905 [details] Test case If a table has "overflow: clip;", then Chrome and Firefox both clip the contents of the table to the shape of the table. This is very useful when you want a table with round corners. Unfortunately, WebKit does not, giving sharp edges for elements that have a non-transparent background. Tested using Safari on iOS, and Epiphany on Linux.