Widget link broken by `.desaturated` image rendering mode

Question

siburb2 OP

Created Sep ’24

Replies 2

Boosts 1

Participants 2

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.

0

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