Bug 250881

Summary:	REGRESSION (Safari 15.5 - 16.2): Border with opacity breaks background image with svg and gradient
Product:	WebKit	Reporter:	garrytaulu
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED WORKSFORME
Severity:	Major	CC:	sabouhallawa, simon.fraser, smoley, webkit-bug-importer, zalan
Priority:	P2	Keywords:	InRadar
Version:	Safari 16
Hardware:	Unspecified
OS:	Unspecified

Description garrytaulu 2023-01-19 17:33:26 PST

This use to work correctly in Safari 15.5 but is now broken in 16.2 (and possibly earlier versions). Works correctly in Chrome and Firefox.

Issue:
Elements that have a background-image that contain an SVG and gradient break when a border with opacity is applied. It seems like the gradient is being removed.

Example:
https://codepen.io/garrytaulu/pen/PoBEYmz

Comment 1 Radar WebKit Bug Importer 2023-01-19 18:57:46 PST

<rdar://problem/104457420>

Comment 2 Simon Fraser (smfr) 2023-01-20 11:02:32 PST

Possibly the same as bug 238088.

Comment 3 Smoley 2023-01-25 11:03:39 PST

Thanks for filing, this does not reproduce for me on macOS 13.2 (22D49) https://developer.apple.com/download/

Does this reproduce for you on that build, or on Safari Technology Preview if you prefer not to update macOS at the moment?
https://developer.apple.com/safari/technology-preview/

Comment 4 garrytaulu 2023-01-26 15:31:23 PST

I can confirm that this is indeed fixed in macOS 13.2 / Safari 16.3. 

Thank you.

Comment 5 garrytaulu 2023-01-26 15:47:12 PST

(In reply to garrytaulu from comment #4)
> I can confirm that this is indeed fixed in macOS 13.2 / Safari 16.3. 
> 
> Thank you.

But oddly not fixed in iOS 16.3, so I guess it’s half resolved 😊