Unable to scroll the list under View.safeAreaInset()

Question

Gong OP

Created Sep ’24

Replies 2

Boosts 1

Participants 2

Hello,

Just noticed an issue with the .safeAreaInset() and .safeAreaPadding() modifiers. On iOS 18 beta 8, I'm unable to scroll the list or any other scrollable views within the safe area. This behavior is different compared to iOS 17/16. For example, adding a floating button using the .safeAreaInset() modifier:

On iOS 18, the list cannot be scrolled or interacted within the bottom circled area.

Answered by DTS Engineer in 802958022

@Gong Thanks for flagging this and filing the Feedback Report. As a workaround have you tried using the .overlay(alignment: .bottomTrailing) modifier instead.

You should be able to place the floating button in front of the List at the bottom trailing position. For example:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(0..<100) { i in
                Button {
                    print("Select row \(i)")
                } label: {
                    Text("Row \(i)")
                }
            }
            .navigationTitle("Select a row")
            .overlay(alignment: .bottomTrailing) {
                Button {
                    print("Show help")
                } label: {
                    Image(systemName: "plus")
                        .font(.largeTitle)
                        .symbolRenderingMode(.multicolor)
                        .padding(.trailing)
                }
            }
        }
    }
}

Boost

Answer 1

Gong OP

Sep ’24

FB15078533

0

Answer 2

DTS Engineer OP

Apple

Sep ’24

Accepted Answer

Recommended

@Gong Thanks for flagging this and filing the Feedback Report. As a workaround have you tried using the .overlay(alignment: .bottomTrailing) modifier instead.

You should be able to place the floating button in front of the List at the bottom trailing position. For example:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(0..<100) { i in
                Button {
                    print("Select row \(i)")
                } label: {
                    Text("Row \(i)")
                }
            }
            .navigationTitle("Select a row")
            .overlay(alignment: .bottomTrailing) {
                Button {
                    print("Show help")
                } label: {
                    Image(systemName: "plus")
                        .font(.largeTitle)
                        .symbolRenderingMode(.multicolor)
                        .padding(.trailing)
                }
            }
        }
    }
}

1