.ignoresSafeArea(.keyboard) Not preventing views pushing up

Question

I am trying to fix a UI behaviour where when the text field is tapped and the keyboard comes up, the views are pushed up.

.ignoresSafeArea(.keyboard) fixes it when I don't include BackgroundView()

However, when BackgroundView() is in the code, .ignoresSafeArea(.keyboard) is not effective.

Here is my code:

struct Home: View {
    
    @State private var email: String = ""
    @State private var password: String = ""
    
    
    var body: some View {
        
        NavigationView {
            ZStack {
                
                BackgroundView()
                
                VStack {
                                        
                    VStack {
                        Spacer()
                        
                        
                        VStack {
                            
                            Text("Email or Username")
                                .font(.title)
                                .fixedSize(horizontal: false, vertical: true)
                                .minimumScaleFactor(0.7)
                                .lineLimit(1)
                                .truncationMode(.tail)
                                .frame(maxWidth: .infinity, alignment: .leading)
                                .padding(.leading)
                                .offset(y: 10)
                            
                            
                            ZStack {
                                Color.gray
                                
                                TextField("Email or Username", text: $email)
                                    .textContentType(.emailAddress)
                                    .keyboardType(.emailAddress)
                                    .font(.title)
                                    .fixedSize(horizontal: false, vertical: true)
                                    .minimumScaleFactor(0.7)
                                    .lineLimit(1)
                                    .truncationMode(.tail)
                                    .padding(.leading)
                                
                            }
                            .frame(width: 300, height: 80)
                            .cornerRadius(25)
                        }
                        
                        VStack {
                            
                            Text("Password")
                                .font(.title)
                                .fixedSize(horizontal: false, vertical: true)
                                .minimumScaleFactor(0.7)
                                .lineLimit(1)
                                .truncationMode(.tail)
                                .frame(maxWidth: .infinity, alignment: .leading)
                                .padding(.leading)
                                .offset(y: 10)
                            
                            
                            ZStack {
                                Color.gray
                                
                                SecureField("Password", text: $password)
                                    .font(.title)
                                    .textContentType(.password)
                                    .fixedSize(horizontal: false, vertical: true)
                                    .minimumScaleFactor(0.7)
                                    .lineLimit(1)
                                    .truncationMode(.tail)
                                    .padding(.leading)
                                
                            }
                            .frame(width: 300, height: 80)
                            .cornerRadius(25)
                        }
                        
                        
                        Spacer()
                        
                        VStack {
                            
                            Button(action: {
                                print("Login Tapped")
                            }) {
                                
                                Text("Login")
                                    .font(.title)
                                    .fixedSize(horizontal: false, vertical: true)
                                    .minimumScaleFactor(0.7)
                                    .lineLimit(1)
                                    .truncationMode(.tail)
                            }
                        }
                        .padding(.bottom, 50)
                    }
                }
            }
            .ignoresSafeArea(.keyboard)
        }
    }
}

struct BackgroundView: View {
    
    var body: some View {
        VStack {
            ZStack {
                Circle()
                    .fill(.green)
            }
            .frame(width: UIScreen.screenWidth * 1.00, height: UIScreen.screenHeight * 1.00)
            
            Spacer()
        }
        .ignoresSafeArea()
    }
}

How can I fix this? I want the keyboard to never push up the views.

Answer 1

The issue there is the BackgroundView itself. Just remove its frame. If you want it centered remove VStack and the Spacer:

struct BackgroundView: View {
    
    var body: some View {
        ZStack {
            Circle()
                .fill(.green)
        }
        .ignoresSafeArea()
    }
}