Content of TabView is going beyond safe areas in the NavigationStack

import SwiftUI
struct OnboardingView: View {        
    @ObservedObject var viewModel: OnboardingViewModel        
    var body: some View {        
        TabView(selection: $viewModel.currentPage) {           
            ForEach(OnboardingPages.allCases, id: \.rawValue) { page in                
                getPageView(for: page)                    
                    .tag(page.rawValue)            
                }        
            }        
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))            
}        

@ViewBuilder    
private func getPageView(for page: OnboardingPages) -> some View {        
    VStack(spacing: 32) {                       
        Spacer()                        
        VStack(alignment: .center, spacing: 8) {                
            Text(page.title)                    
                .font(.urb(.semiBold, size: 32))                    
                .foregroundStyle(.white)                                
            Text(page.description)                    
                .font(.urb(.regular, size: 16))                    
                .foregroundStyle(.white)                    
                .multilineTextAlignment(.center)            
        }                        
        
        continueButton                        
           
        dots        
    }        
    .padding(.horizontal, 16)        
    .padding(.bottom, 35)        
    .ignoresSafeArea()        
    .background(            
        Image(page.image)                
            .resizable()                
            .scaledToFill()                
            .ignoresSafeArea()        
    )    
}

The Navigation Stack:

struct RootView: View {

    @StateObject private var router = Router()
    
    var body: some View {
        NavigationStack(path: $router.path) {
            Color.clear
                .navigationDestination(for: Route.self) { route in
                    switch route {
                    
                    case .launch:
                        LaunchScreen()
                            .onAppear { router.decideInitialFlow() }
                            .navigationBarBackButtonHidden(true)
                    
                    case .onboarding:
                        OnboardingView(viewModel: OnboardingViewModel(finish: router.finishOnboarding))
                            .navigationBarBackButtonHidden(true)
                    }
                }
        }
    }
}

The problem is:

1. Even without NavigationStack, ignoresSafeArea stretches TabView out of safe area
2. If ignoresSafeArea modifier is used with TabView, then content is go beyond safe area
3. If ignoresSafeAre modifier is not used with TabView, then the image does not cover full screen

VStack and no safe area:	Vstack and safe area:

Source link