12

Whenever I rotate the device to landscape and back again, the top of the NavigationView (including the title and back button) get clipped under the status bar.

Minimal reproducible example:

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    ForEach(0..<15) { _ in
                        Text("Filler")
                        .frame(maxWidth: .infinity)
                        .background(Color.green)
                        .padding()
                    }
                }
            }
            .navigationBarTitle("Data")
        }
    }
}

As long as the content is scrollable, the glitch happens. I originally came across this while using a List. It didn't matter if I clicked a row first, went to the popped view, then rotated the device, or just rotated back in the main screen.

struct ContView: View {
    let data = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen"]
    var body: some View {
        NavigationView {
            List {
                ForEach(data, id: \.self) { word in
                    NavigationLink(destination:
                        Text("Link")
                    ) {
                        Text(word)
                    }
                }
            }
            .navigationBarTitle("Data", displayMode: .large)
            .listStyle(InsetGroupedListStyle())
        }
    }
}
Rotating in the main screen Rotating after tapping a row

Is this a bug, or am I doing something wrong? I also get this printed in the console:

2020-10-19 09:05:30.613243-0700 MyAppName[43106:5613320] Unbalanced calls to begin/end appearance transitions for <TtGC7SwiftUI19UIHostingControllerGVS_15ModifiedContentVVS_22_VariadicView_Children7ElementGVS_18StyleContextWriterVS_19SidebarStyleContext__: 0x10340c180>.

Xcode version: 12.0 (12A7209), running on an iPhone 7 Plus on iOS 14.0

aheze
  • 24,434
  • 8
  • 68
  • 125
  • 2
    Hi @aheze I had the same issue and I did not find a fast solution, I decide to use a custom View as NavBar with fixed height. That solved the issue in rotation but I think it is not the best solution. The problem come when the list is greater than the height of the view. If you use just 5 elements in the list, you will see the large title when rotating back, but if the list is greater than the height of the device, the behavior changes and you will see the small title. – Diego Jiménez Oct 25 '20 at 12:27
  • 1
    Yeah, I’m starting to think it’s a bug. For now, I’m working around it by presenting the navigation view in a `sheet`. – aheze Oct 25 '20 at 15:47
  • 3
    Holy god! It's happening to me right now. Did you report Apple? I came across this hacky solution where I added `.navigationViewStyle(StackNavigationViewStyle())` to the `NavigationView`. It's not solving the problem, but at least my nav bar title is not clipped under the status bar. – Harshil Patel Nov 24 '20 at 04:19
  • 1
    @Luffy Actually I haven't reported yet... I will asap. Seems `StackNavigationViewStyle` is starting to be some all-purpose fix (also works for [preventing](https://stackoverflow.com/questions/64734426/swiftui-how-to-remove-white-background-behind-list-that-is-styled-with-sidebar) a white background for `SidebarListStyle`)! – aheze Nov 24 '20 at 05:56

1 Answers1

1

Try adding top padding to the NavigationView

Eli Front
  • 695
  • 1
  • 8
  • 28
Mcrich
  • 75
  • 9