Widget link broken by `.desaturated` image rendering mode

Question

siburb2 OP

Created Sep ’24

Replies 4

Boosts 1

Participants 4

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.

1

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)
}

0

Answer 3

mladenny OP

4w

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.

0

Answer 4

darkpaw OP

1w

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.

0