iOS 14 Medium Widget Size Background Image Refuses to Fill

Question

For some reason I'm unable to get an image background to aspectFill correctly in XCode Version 12.0, but only on the .systemMedium widget size. It seems to work perfectly on the small and large sizes.

I've got a pretty simple View:

import SwiftUI

@available(iOS 13.0.0, *)
struct Banana: View {

    var body: some View {
        VStack(alignment: .leading){
            Spacer()
            Text("Aardvark Exactlywhat")
                .font(.largeTitle)
                .bold()
                .padding(.bottom, 20)
                .padding(.leading, 20)
                .padding(.trailing, 20)
                .minimumScaleFactor(0.5)
                .foregroundColor(.white)
                .shadow(
                    color: Color.black,
                    radius: 1.0,
                    x: CGFloat(4),
                    y: CGFloat(4))
        }
        .edgesIgnoringSafeArea(.all)
        .background(
            Image("bananas")
                .resizable()
                .scaledToFill()
        ).edgesIgnoringSafeArea(.all)
    }
}

@available(iOS 13.0.0, *)
struct Banana_Previews: PreviewProvider {
    static var previews: some View {
        Banana()
    }
}

And a pretty simple widget:

struct fruitWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        Banana()
    }
}

@main
struct fruitWidget: Widget {
    let kind: String = "fruitWidget"
    
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            fruitWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("fruit Widget")
        .description("Enhance your day with delicious fruit.")
        .supportedFamilies([.systemSmall, .systemMedium, .systemLarge])
    }
}

struct fruitWidget_Previews: PreviewProvider {
    static var previews: some View {
        Group{
            fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
                .previewContext(
                    WidgetPreviewContext(family: .systemSmall))
            fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
                .previewContext(
                    WidgetPreviewContext(family: .systemMedium))
            fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
                .previewContext(
                    WidgetPreviewContext(family: .systemLarge))
        }
    }
}

I've tried changing the aspect ratio, using GeometryReader and frame(), and a dozen other variations. Regardless of what I try, I get white space on the left and right in the medium widget. It only works for the large and small size. See image:

Answer 1

Here is fixed variant - as image in the background you have to expand VStack to full screen.

Note: edgesIgnoringSafeArea allows to go beyond safe area when content is wider, but not make content wide.

var body: some View {
    VStack(alignment: .leading){
        Spacer()
        Text("Aardvark Exactlywhat")
            .font(.largeTitle)
            .bold()
            .padding(.bottom, 20)
            .padding(.leading, 20)
            .padding(.trailing, 20)
            .minimumScaleFactor(0.5)
            .foregroundColor(.white)
            .shadow(
                color: Color.black,
                radius: 1.0,
                x: CGFloat(4),
                y: CGFloat(4))
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)   // << this one !!
    .edgesIgnoringSafeArea(.all)
    .background(
        Image("plant")
            .resizable()
            .scaledToFill()
    )
}