FB15014497: NavigationStack with clipShape causes navigation bar to go out of bounds when redrawing.

[AnthonyWharton]

• Date: 2024-09-02
• Resolution: Open
• Area: SwiftUI
• OS: iOS 17.6.1
• Type: Incorrect/Unexpected Behavior

Description

When transitioning the position of a NavigationStack that has a clipShape applied to it, the view can end up rendering outside of the current safe area.

This is demonstrated in the code attached, this was written in a brand new project within Xcode, and should be a drop in replacement for the ContentView struct. The code has a top level VStack with a “top view” (with a blue border) and a NavigationStack beneath it (with a red border). When pressing the button you can see the top view come in and out of view, with and without animations depending on the button pressed.

• When removing the top view from the screen with animations, the transition moves the navigation title bar to outside of the safe area bounds when we expect it to render within the safe area.
• When using the non animated button, everything moves to the correct place.
• Commenting out the .clipShape() will resolve the issue in the animated case.

Problem is present in previews, simulators, and on real devices (iPhone 15 Pro, iOS 17.6.1).

Xcode version: Version 15.4 (15F31d)

Files

ClipShareAnimationBug.swift

import Foundation
import SwiftUI

struct ContentView: View {
   @State var topShowing: Bool = false

    var body: some View {
        VStack(spacing: 0) {
            if topShowing {
                Text("Hello there!")
                    .frame(maxWidth: .infinity, minHeight: 100)
                    .background(Color.orange, ignoresSafeAreaEdges: .top)
                    .border(.blue)
            }
            NavigationStack {
                HStack {
                    Button {
                        topShowing.toggle()
                    } label: {
                        Text("Toggle Top")
                            .padding()
                            .frame(minHeight: 150)
                            .background {
                                Color.orange.clipShape(RoundedRectangle(cornerRadius: 25))
                            }
                    }
                    Button {
                        withAnimation {
                            topShowing.toggle()
                        }
                    } label: {
                        Text("Animated Toggle Top")
                            .padding()
                            .frame(minHeight: 150)
                            .background {
                                Color.orange.clipShape(RoundedRectangle(cornerRadius: 25))
                            }
                    }
                }
                .navigationTitle("Example Title")
                .navigationBarTitleDisplayMode(.inline)
            }
            .clipShape(
                UnevenRoundedRectangle(
                    topLeadingRadius: topShowing ? 16 : 0,
                    topTrailingRadius: topShowing ? 16 : 0
                )
            )
            .background(.orange, ignoresSafeAreaEdges: .horizontal)
            .border(.red)
        }
    }
}