I am building a custom full screen cover that can be dragged down with a gesture like the podcast app.

For the transition modifier with edge as bottom, it uses the bottom edge of the parent view thus if the parent view doesn’t ignore the safe area, the removal animation (i.e. sliding down) gets “stuck”/”glitches” at the bottom edge of the screen.

The issue is I want the elements in the full screen cover like text and buttons to respect the safe area except its background.

I am not sure how to fix this. Every single solution on stackoverflow are completely irrelevant suggesting to use the background modifier not taking into account using modifiers like transition with edge as bottom.

 var body: some View {
    ZStack {
        TabView {
            ...
        }
        
        if showing {
            FullScreenCover()
                .zIndex(1)
                .transition(.move(edge: .bottom))
        }
    }
    .ignoresSafeArea() //I need to set this here so that the bottom edge recognised by the transition modifier would be the very bottom edge of the device. 
}

struct FullScreenCover: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            Color.blue
                .ignoresSafeArea()

            Text("Hello")
        }
    }
}