Bug 250881 - REGRESSION (Safari 15.5 - 16.2): Border with opacity breaks background image with svg and gradient
Summary: REGRESSION (Safari 15.5 - 16.2): Border with opacity breaks background image ...
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 16
Hardware: Unspecified Unspecified
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-01-19 17:33 PST by garrytaulu
Modified: 2023-01-26 15:47 PST (History)
5 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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 😊