List view with .safeAreaInset modifier incorrect behavior

Hello!

I noticed that the .safeAreaInset() modifier was not working as expected. The bottom elements of the List view get partially obstructed by the element at the bottom of the screen. As seen below:

struct TestView: View {
  var body: some View {
     
      List {
        ForEach(1..<30) { _ in
          Text("Something")
            .font(.largeTitle)
        }
        .frame(maxWidth: .infinity)
       
      }
       
     
    .safeAreaInset(edge: .bottom) {
      Button {
         
      } label: {
        Text("Continue")
          .frame(maxWidth: .infinity)
      }
      .buttonStyle(.borderedProminent)
      .controlSize(.large)
      .padding(.horizontal)
    }
  }
}

I attempted to test the safeAreaInset() modifier on a ScrollView instead and it seemed to be working as expected.

struct TestView: View {
  var body: some View {
     
      ScrollView {
        ForEach(1..<30) { _ in
          Text("Something")
            .font(.largeTitle)
        }
        .frame(maxWidth: .infinity)
       
      }
       
     
    .safeAreaInset(edge: .bottom) {
      Button {
         
      } label: {
        Text("Continue")
          .frame(maxWidth: .infinity)
      }
      .buttonStyle(.borderedProminent)
      .controlSize(.large)
      .padding(.horizontal)
    }
  }
}

In downloading this WWDC21 sample project you can see the same error in the GradientDetailView as this project uses List as well.

Am I missing something? Or is this just a bug in SwiftUI?

Any help would be greatly appreciated! Thanks!

I have the same issue. Using ScrollView/LazyVStack for now which is not ideal. Have you found any solution?

List view with .safeAreaInset modifier incorrect behavior
 
 
Q