SwiftUI - Large navigation bar is broken when a background color is set

Question

I'm running into a very weird bug and couldn't figure out how to work around it. I have a navigation view with a navigation title. I noticed that the moment I change the background color of its containing view, the navigation bar overlaps with the screen content instead of switching to inline mood. See below.

If I remove that one line in which I am setting the background color then everything work fine. Anyone came across something similar and how did you solve it?

struct ContentView: View {
  var body: some View {
    NavigationView {
      ScrollView {
        VStack(alignment: .leading) {
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
        }
        VStack(alignment: .leading) {
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
        }
        VStack(alignment: .leading) {
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
        }
        VStack(alignment: .leading) {
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
        }
        VStack(alignment: .leading) {
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
        }
      }
      .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
      .background(Color.red)
      .navigationBarTitle(Text("Title"))
    }
  }
}

score 3 · Accepted Answer · answered Dec 10 '19 at 16:43

If you don't frame() the ScrollView but instead wrap all the VStacks in another VStack and resize this, it works:

struct ContentView: View {
  var body: some View {
    NavigationView {
      ScrollView {
        VStack{
            VStack(alignment: .leading) {
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
            }
            VStack(alignment: .leading) {
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
            }
            VStack(alignment: .leading) {
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
            }
            VStack(alignment: .leading) {
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
            }
            VStack(alignment: .leading) {
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
            }
        }
        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
        .background(Color.red)
        .navigationBarTitle(Text("Title"))
      }
    }
  }
}

Unfortunately, wrapping everything in a VStack breaks ScrollViewReader `scrollTo(id)` behaviour. This is a total mess. — Azurlake, Nov 10 '22 at 20:17

SwiftUI - Large navigation bar is broken when a background color is set

1 Answers1