SwiftUI NavigationBar not extending to top of iPhone screen with ScrollView-CodePudding

In my SwiftUI View I have a ScrollView filled with text for attribution to show what frameworks were used in my app.

Once this text scrolls past the navigation bar it should be hidden past that point to the very top of the iPhone screen BUT in my case the text reappears because my navigation bar seems to only be a certain height (see image below) and does not extend to the top of the screen and prevent text from reappearing.

The attribution view below is inside of a AboutView which is also inside of a SettingsView that contains a NavigationView.

Any idea why this is happening? Image is attached..

TEXT RE-APPEARING PAST NAVIGATION BAR

PARENT VIEW

struct Settings: View {
    @Environment(\.presentationMode) var presentation
    @State private var presentAbout: Bool = false
    
    var body: some View {
       NavigationView {
            VStack {
                Text("About").onTapGesture { presentAbout.toggle() }
            }
            .navigationBarTitle("Settings", displayMode: .inline)
            .navigationBarBackButtonHidden(true)
            .toolbar(content: {
                Button(action: { 
                     self.presentation.wrappedValue.dismiss()
                }, label: { Text("Cancel") })
            })
            .background ( NavigationLink("", destination: AboutMenu(), isActive: $presentAbout ))
         }
    }
}

SUB VIEW 1

struct AboutMenu: View {
    @Environment(\.presentationMode) var presentation

    @State private var presentAttribution: Bool = false
    
    var body: some View {
        VStack {
            Text("Attribution").onTapGesture { presentAttribution.toggle() }
        }
        .navigationBarTitle("About", displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .toolbar(content: {
            ToolbarItem(placement: .navigationBarLeading) {
                Button(action: { self.presentation.wrappedValue.dismiss() }, label: { 
                   Image(systemName: "chevron.backward")     
            }
        })
        .background ( NavigationLink("", destination: Attribution(), isActive: $presentAttribution))
    }
}

SUB VIEW 2 Where problem exists.

struct Attribution: View {
    @Environment(\.presentationMode) var presentation
   
    var body: some View {
        VStack {
            ScrollView {
                Text(attribution) // <- THIS TEXT shows behind NavigationBar past the navigation bar.
            }
        }
        .navigationBarTitle("Attribution", displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .toolbar(content: {
            ToolbarItem(placement: .navigationBarLeading) {
               Button(action: { self.presentation.wrappedValue.dismiss() }, label: { 
                  Image(systemName: "chevron.backward")
            }
        })
    }
}

CodePudding user response：

This can happen when ScrollView is not root view of the NavigationView, so it does not recognise scroll view presence.

It can be fixed by explicit clipping, like

VStack {
    ScrollView {
        Text(introText)
    }
    .clipped()       // << here !!