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.
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.
<rdar://problem/105210397>
<rdar://problem/105210442>
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!