Context
I have a custom navigation bar that transitions from a large to a small state depending on the scroll offset. Being a navigation bar, I initially implemented it with safeAreaInset but grew frustrated with scroll glitches that I couldn’t resolve. Eventually, I thought I would try using a VStack instead and it worked.
Question
Why does using safeAreaInset like:
content.safeAreaInset(edge: .top) {
customNavigationView()
}
cause the glitches, while using a VStack work fine:
VStack(spacing: 0) {
customNavigationView()
content
}
The reason I ask is because safeAreaInset feels like the correct approach to this problem. But please advise if you disagree or have a better solution.
| VStack | SafeAreaInset |
|---|---|
![]() |
![]() |
More Details
The screen body is, essentially, of the form:
var body: some View {
OffsetScrollView(offset: $offset) {
LazyVStack(spacing: 0) {
content
}
}
.modifier(NavigationBar(offset: offset))
}
where
OffsetScrollViewis a customScrollViewthat its offset into anoffsetstateNavigationBaris aViewModifierwith one of the implementations in the question
For further details, see the project on Github.
TIA.






