SwiftUI iOS 26 .safeAreaBar issue with large navigation title

Question

Created 2w

Replies 4

Boosts 1

Participants 3

I have some really straight forward code in a sample project. For some reason when the app launches the title is blurred obscured by scrolledgeeffect blur. If I scroll down the title goes small as it should do and all looks fine. If I scroll back to the top, just before it reaches the top the title goes large and it looks correct, but once it actually reaches/snaps to the top, is then incorrectly blurs again.

Is there anything obvious I'm doing wrong? Is this a bug?

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack {
                    Rectangle().fill(Color.red.opacity(0.2)).frame(height: 200)
                    Rectangle().frame(height: 200)
                    Rectangle().frame(height: 200)
                    Rectangle().frame(height: 200)
                    Rectangle().frame(height: 200)
                }
            }
            .safeAreaBar(edge: .top) {
                Text("Test")
            }
            .navigationTitle(Title")
        }
    }
}

Screenshot 2026-01-12 at 14.17.38.png

Boost

Answer 1

DTS Engineer OP

Apple

2w

Hi @simonfromhelix!

Apply the .safeAreaBar(edge: .top) { ... } to the parent view, and voila!

To help me identify if this is a bug, please file a bug report and respond with the FB number below while I investigate.

Thank you,

 Travis Trotto - DTS Engineer

1

Answer 2

simonfromhelix OP

2w

@DTS Engineer

Thanks for the suggestion, sorry I should have mentioned I tried that. Unfortunately doing this puts the safeAreaBar content in the wrong place, overlaid on the whole view rather than the scrollview. Hopefully the screenshot demonstrates this. I've now filed a feedback for this FB21613303.

I didn't put the feedback in originally because I've submitted 3 in the past 3 months all with sample code, details etc... and not even had an acknowledgement ☹️ But if you say they help, I will keep submitting! Thanks

Screenshot 2026-01-13 at 09.42.27.png

0

Answer 3

someonelikeme OP

1w

I think the question remains; where is .safeAreaBar supposed to be placed, when you're using a ScrollView on the page? I'm also using the .top setting. I haven't been able to find some usage example of this. It seems that if we attach the .safeAreaBar onto the scrollview itself, the scrollview content is correctly offset at first, such that the safeareabar contents do not overlap the scrollviews unless scrolled. If we put the safeareabar higher in the hierarchy, the scrollview contents are not offset and we unfortunately get overlap. Would help a ton to get some insight here. As a workaround, perhaps it would work by putting the safeareabar high in the hierarchy (like onto the first view in the SwiftUI view body), and then manually offsetting the scrollview offset somehow. Still need to figure out how to find the correct offset here...

1

Answer 4

DTS Engineer OP

Apple

1w

@simonfromhelix Thank you for your patience on this matter.

The location of the text element "Test" in your second image is the expected result of .safeAreaBar(edge: .top). NavigationTitle switches to inline and displays in the toolbar, as a feature of ScrollView, and shows in the expected location in your image.

If you want to conditionally hide the Text or navigationTitle to appear you would need to add additional logic or styling.

 Travis Trotto - DTS Engineer

1