Bug 285300

Summary: Border doesn't show when linear gradient and border radius are set
Product: WebKit Reporter: Duncan Wilcox <duncan>
Component: Layout and RenderingAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Test case
none
Safari 18.2 screenshot
none
Chrome 131 screenshot
none
Firefox 133 screenshot none

Duncan Wilcox
Reported 2025-01-02 07:20:56 PST
Created attachment 473744 [details] Test case When a div has a border set on three sides, plus a gradient, plus a border radius, the border is not drawn. The attached sample shows this. It looks like an incorrect line geometry calculation, because setting a border-bottom: 0 solid rgba(0,0,0,0) fixes the drawing. The current Chrome and Firefox draw it correctly. Attaching screenshots.
Attachments
Test case (373 bytes, text/html)
2025-01-02 07:20 PST, Duncan Wilcox 		no flags
Details
Safari 18.2 screenshot (7.90 KB, image/png)
2025-01-02 07:24 PST, Duncan Wilcox 		no flags
Details
Chrome 131 screenshot (7.55 KB, image/png)
2025-01-02 07:24 PST, Duncan Wilcox 		no flags
Details
Firefox 133 screenshot (7.33 KB, image/png)
2025-01-02 07:24 PST, Duncan Wilcox 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Duncan Wilcox
Comment 1 2025-01-02 07:24:15 PST
Created attachment 473745 [details] Safari 18.2 screenshot
Duncan Wilcox
Comment 2 2025-01-02 07:24:29 PST
Created attachment 473746 [details] Chrome 131 screenshot
Duncan Wilcox
Comment 3 2025-01-02 07:24:43 PST
Created attachment 473747 [details] Firefox 133 screenshot
Radar WebKit Bug Importer
Comment 4 2025-01-09 07:21:12 PST
<rdar://problem/142617573>
Simon Fraser (smfr)
Comment 5 2025-01-16 18:27:59 PST
This is something going wrong in the BleedAvoidance code.
Simon Fraser (smfr)
Comment 6 2025-01-16 20:41:36 PST
A workaround is to make the border color not quite opaque (e.g. rgba(...., 99.9%)).
Simon Fraser (smfr)
Comment 7 2025-01-16 20:49:29 PST
This bug also occurs when the background image is a format that doesn't support transparency (e.g. JPEG).
Simon Fraser (smfr)
Comment 8 2025-01-16 20:50:29 PST
The bug here is that we use the BleedAvoidance::BackgroundOverBorder method, but `BackgroundPainter::paintFillLayer()` fails to shrink the destination rect for the background image.
Simon Fraser (smfr)
Comment 9 2025-01-17 12:28:22 PST
Pull request: https://github.com/WebKit/WebKit/pull/39206
EWS
Comment 10 2025-01-17 21:52:38 PST
Committed 289101@main (a74c01d2221a): <https://commits.webkit.org/289101@main> Reviewed commits have been landed. Closing PR #39206 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.