Simple SwiftUI Background Image keeps moving when keyboard appears

Question

This is driving me nuts. There seems to be new behaviour for handling background images in iOS14.

Desired effect is: a fixed background image that fills the screen, ignoring the safe areas, and is totally static when the keyboard pops up. Instead the keyboard makes the image slide to the right, even though the keyboard is rising from the bottom (??).

Is this a SwiftUI bug? Any ideas/workarounds appreciated.

The code to produce this is very small:

import SwiftUI

struct ContentView: View {
    
    @State var name = "Name"
    
    var body: some View {
        GeometryReader { geometry in
            VStack {
                TextField("Placeholder", text: $name)
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
            .background(
                Image("bricks")
                    .resizable()
                    .scaledToFill()
                    .edgesIgnoringSafeArea(.all)
            )
        }
    }
}

score 9 · Accepted Answer · edited Aug 01 '22 at 15:36

Ok, it turns our that adding the .frame call as follows allows the the background image to display as desired.

(Note specifically that the .frame call omits the height argument. In many previous tries to solve this the height was included, leading to the different undesired behaviour)

.background(
    Image("bricks")
        .resizable()
        .scaledToFill()
        .frame(width: geometry.size.width)
        .edgesIgnoringSafeArea(.all)
)

score 4 · Answer 2 · answered Aug 01 '22 at 15:46

For me it worked when I wrapped the background Image inside a GeometryReader which ignores the Safearea like this:

GeometryReader { geo in
    Image(uiImage: Backgrounds.chalk)
        .resizable(resizingMode: .tile)
        .scaledToFill()
        .frame(width: geo.size.width, height: geo.size.height)
}
.edgesIgnoringSafeArea(.all)

score 0 · Answer 3 · answered May 07 '22 at 03:00

It's work for me:

.background(
                Image("bricks")
                    .resizable()
                    .scaledToFill()
                    .frame(width: geometry.size.width)
                    
            )
.edgesIgnoringSafeArea(.all)

Simple SwiftUI Background Image keeps moving when keyboard appears

3 Answers3

Linked