Widget link broken by `.desaturated` image rendering mode

Question

Created Sep ’24

Replies 8

Boosts 5

Participants 8

Using desaturated mode on an image in a widget will break any links or buttons that use the image as their 'label'.

Using the following will just open the app as if there was no link at all - therefore just using the fallback userActivity handler, or any .widgetURL() urls provided.

Link(destination: URL(string: "bug://never-works")!) {
    Image("puppy")
        .widgetAccentedRenderingMode(.desaturated)
}

The same goes for buttons:

Button(intent: MyDemoIntent()) {
    Image("puppy")
        .widgetAccentedRenderingMode(.desaturated)
}

I've tried hacky solutions like putting the link behind the image using a ZStack, and disabling hit testing on the image, but they don't work. Anything else to try?

Logged as Feedback #15152620.

Boost

Answer 1

siburb2 OP

Sep ’24

In case anybody comes up against this, one "solution" is to do the opposite of the hack I tried previously. Use a ZStack, and put the button or link in front of the image instead of behind it.

In that case, you can achieve a quite nice "semi-desaturated" effect, by putting a .fullColor but low opacity version of the image in front, and the .desaturated version behind it. Alternatively, you can just put a Color.clear in front, constrained to the same proportions as your image, and have that as the button.

e.g.

ZStack {
    Image("puppy")
        .resizable()
        .widgetAccentedRenderingMode(.desaturated)
        .aspectRatio(1, contentMode: .fit)
    Link(destination: URL(string: "bugdemo://desaturated-now_works")!) {
        Color.clear
            .aspectRatio(1, contentMode: .fit)
    }
}

Or:

ZStack {
    Image("puppy")
        .resizable()
        .widgetAccentedRenderingMode(.desaturated)
        .aspectRatio(1, contentMode: .fit)
    Link(destination: URL(string: "bugdemo://desaturated-now_works")!) {
	    Image("puppy")
	          .resizable()
	          .widgetAccentedRenderingMode(.fullColor)
	          .aspectRatio(1, contentMode: .fit)
	          .opacity(0.2)
    }
}

Obviously not a fix, but a decent enough work around.

3

Answer 2

nemecek_f OP

Sep ’24

I have the same issue. Seems to be related to any widgetAccentedRenderingMode.

Thanks for the workarounds! In my case Color.clear did not work, so I had to do:

Link(destination: launchUrl(for: game)) {
     Color.black.opacity(0.001)
}

1

Answer 3

mladenny OP

Dec ’24

Thank you! I thought I was going crazy when I saw that .accentDesaturated and .desaturated are breaking my buttons, but the rest of the modes aren’t.

1

Answer 4

darkpaw OP

Dec ’24

I've wasted hours today trying to figure out why my Links weren't working. Thanks, Apple. And, special thanks to the one guy you've got testing your software these days.

1

Answer 5

ForumsContributor OP

Feb ’25

This has been driving me crazy. Thanks for posting about it so I could eventually understand the issue and come up with a workaround.

0

Answer 6

Andy Ibanez OP

Oct ’25

The provided workarounds appear to no longer work on iOS 26. Anyone else experiencing the same?

1

Answer 7

krajeec OP

2d

On iOS 26, the suggested workarounds no longer work. However, thanks to this mastodon post (https://mastodon.social/@jayrhynas/115208669458469304) I was able to find yet another workaround that works on iOS 26 (haven't tested older OSes):

    Link(destination: deepLink) {
      VStack() {
        // Wrapped Color.clear in yet another Link - workaround for .widgetAccentedRenderingMode(.desaturated) breaking links
        Link(destination: deepLink) {
          Color.clear
        }.background {
          Image(image)
            .resizable()
            .widgetAccentedRenderingMode(.accentedDesaturated)
        }
        
        Text("Open app") // Text in link is working fine
      }
    }

0

Answer 8

DTS Engineer OP

Apple

2d

Thanks for this post.

It appears that you are experiencing a issue where applying desaturated interferes with interactive elements. While this can be inconvenient, here are a few alternative approaches you may consider to work around the problem. Apply custom grayscale styling using filters that may not interfere with interactivity.

Meanwhile, the engineering team is actively working on the bug you have submitted.

You can see the status of your feedback in Feedback Assistant. There, you can track if the report is still being investigated, has a potential identifiable fix, or has been resolved in another way. The status appears beside the label "Resolution." We're unable to share any updates on specific reports on the forums.

For more details on when you'll see updates to your report, please see What to expect after submission.

Keep use the link to communicate with that team until the issue has been fixed.

Albert Pascual   Worldwide Developer Relations.

0