No containerBackground content on Widget in iOS 18 tinted home screen style

The widget I have create for iOS 17 uses the containerBackground to display an image in the background. This works fine. But when I set the home screen to the iOS 18 tinted option the background disappears. I want the background to stay because it contains an image of that is meaningful to the user.

I use the following code:

    @ViewBuilder
    var body: some View {
        if let memory = entry.memory, let uiImage = memory.image {
            Group {
                if entry.showCaption {
                    memoryBody(with: memory)
                } else {
                    Color.white.opacity(0.0000000001)
                }
            }
            .foregroundStyle(.white)
            .widgetBackground(
                Image(uiImage: uiImage)
                    .resizable()
                    .scaledToFill()
            )
        } else if let memory = entry.memory {
            memoryBody(with: memory)
                .widgetBackground(Color.gray)
        } else {
            noMemoryBody()
        }
    }
extension View {
    func widgetBackground(_ backgroundView: some View) -> some View {
        if #available(iOSApplicationExtension 17.0, *) {
            return containerBackground(for: .widget) {
                backgroundView
            }
        } else {
            return background(backgroundView)
        }
    }
}
Answered by codeblocknl in 791290022

The following code is the minimal version to address this problem. This code gets called in side the WidgetBundle.

struct SimpleWidgetView: View {
    var body: some View {
        // Text of other content. This is visible in tinted version
        Text("Widget containing tekst")
            .containerBackground(for: .widget) {
                // Image background. Not visible in tinted config, but visible in Light and Dark
                Image("widget_background")
                    .resizable()
                    .scaledToFill()
            }
    }
}

This is not usable as an example. What is entry etc.? Can you provide a minimum reproducible example that doesn't require other structures and data that you haven't included here?

The following code is the minimal version to address this problem. This code gets called in side the WidgetBundle.

struct SimpleWidgetView: View {
    var body: some View {
        // Text of other content. This is visible in tinted version
        Text("Widget containing tekst")
            .containerBackground(for: .widget) {
                // Image background. Not visible in tinted config, but visible in Light and Dark
                Image("widget_background")
                    .resizable()
                    .scaledToFill()
            }
    }
}

Discovered that this is also happening to my heavily-image based widgets.

Is there a new API in iOS18 to account for this? I see that the Photos app widget appears to correctly tint the displayed images.

No containerBackground content on Widget in iOS 18 tinted home screen style
 
 
Q