| Summary: | "-webkit-box-shadow" with "inset" on a <tr> element, doesn't render | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Dave Gregory <davidg> | ||||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Minor | CC: | ahmad.saleem792, ap, bfulgham, igor.oliveira, nate, rniwa, simon.fraser, webkit-bug-importer, zalan, zeogen | ||||||
| Priority: | P3 | Keywords: | InRadar | ||||||
| Version: | 528+ (Nightly build) | ||||||||
| Hardware: | Mac | ||||||||
| OS: | OS X 10.5 | ||||||||
| Attachments: |
|
||||||||
I've also seen this issue. Its been really annoying. Setting the tr to display:block; fixes the problem. However, reconstructing your table data in block elements is really annoying and near impossible. *** Bug 53110 has been marked as a duplicate of this bug. *** Created attachment 460074 [details] Safari 15.5 differs from other browsers I created a small test case using some code from duplicate bug and then just dumping table from W3Schools <table> and then change the colour to red to make the bug visible. JSFiddle Link - https://jsfiddle.net/ey7bhwfx/show As seen in the attached screenshot, I am able to reproduce this bug in Safari 15.5 on macOS 12.4 and it differs from other browsers. If I am testing it incorrectly and Webkit is aligned with web-spec, please ignore and retest it accordingly. Thanks! *** Bug 104008 has been marked as a duplicate of this bug. *** The test case in JSFiddle fails in Safari, works in Chrome and Firefox. |
Created attachment 65507 [details] shows firefox and webkit side by side. Firefox has the correct look. It renders fine on TR elements without inset. But add inset and the box shadow dissapears. The css: <code> tr { -moz-box-shadow: white 0px 1px 0px 0px inset; -webkit-box-shadow: white 0px 1px 0px 0px inset; -o-box-shadow: white 0px 1px 0px 0px inset; box-shadow: white 0px 1px 0px 0px inset; } </code>