Using SwiftUI .sheet: ScrollView rendering issue when used inside NavigationStack

I am encounter an issue with the height of a ScrollView not rendering properly during the transition of a sheet from closed to open. This results in a gap between the bottom edge of the ScrollView and the bottom edge of the sheet during the animation. I am getting this issue when trying to use the ScrollView inside a NavigationStack and when using a PresentationDetent other than .large.

The code snippet below, for example, suffers from the issue.

    ScrollView {
        Button("Reveal sheet") {
            isPresented = true
        }
    }
    .frame(maxWidth: .infinity)
    .background(.yellow)
    .sheet(isPresented: $isPresented) {
        VStack {
            NavigationStack {
                ScrollView {
                    ForEach(0..<100, id: \.self) { number in
                        Text("\(number)")
                    }
                    .frame(maxWidth: .infinity)
                }
                .background(.green)
                .presentationDetents([.medium])
            }
        }
    }

Here is what the issue looks like for this example.

The issue occurs in:

  • Simulator iPhone 16 iOS 18.4
  • Personal device (iPhone 16 iOS 18.4)
  • Canvas preview

Is this a known issue? Am I using the views wrong?

Any help would be appreciated :).

Using SwiftUI .sheet: ScrollView rendering issue when used inside NavigationStack
 
 
Q