How to create an overlay with padding that ignores the safe area?

Question

ps3zocker OP

Created 3w

Replies 3

Boosts 0

Participants 3

Was it always so tricky to ignore the bottom safe area? Seems like iOS 26 makes this much harder.

I've tried many variations of ignoresSafeArea, safeAreaInset, safeAreaBar, etc. Nothing seems to work. As soon as I add padding, the bottom safe area crashes the party.

This is what I want to achieve: Bildschirmfoto 2025-08-14 um 17.23.03.png

This is what I get right now: Bildschirmfoto 2025-08-14 um 17.23.09.png

struct ContentView: View {
    var body: some View {
        List {
            Text("Content")
        }
        .overlay(alignment: .bottom) {
            content
        }
    }
    
    var content: some View {
        VStack {
            Text("Custom Container")
        }
        .frame(maxWidth: .infinity)
        .frame(height: 400)
        .background(Color.gray, in: .rect(corners: .concentric, isUniform: true))
        .padding(15)
    }
}

Boost

Answer 1

Lorenz0 OP

3w

Hi, if you put .ignoresSafeArea() after the .overlay. it'll work.

struct ContentView: View {
    var body: some View {
        List {
            Text("Content")
        }
        .overlay(alignment: .bottom) {
            content
        }
        .ignoresSafeArea()
    }
    
    var content: some View {
        VStack {
            Text("Custom Container")
        }
        .frame(maxWidth: .infinity)
        .frame(height: 400)
        .background(Color.gray, in: .rect(corners: .concentric, isUniform: true))
        .padding(15)
    }
}

0

Answer 2

DTS Engineer OP

Apple

3w

If you only want to ignore the bottom edges use .ignoresSafeArea(.all, edges: .bottom)

0

Answer 3

ps3zocker OP

3w

List {
    Text("Content")
}
.overlay(alignment: .bottom) {
     content
}
.ignoresSafeArea(.all, edges: .bottom)

This is working, but also breaks the safe area of the List. I guess this is fine because I would disabled scrolling anyway.

0