ios – SwiftUI `safeAreaInset` causes glitches when using `ScrollView`


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
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

  • OffsetScrollView is a custom ScrollView that its offset into an offset state
  • NavigationBar is a ViewModifier with one of the implementations in the question

For further details, see the project on Github.
TIA.

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img