Weird Bug: Navbar Overlapping Issue with TabView and ScrollView in SwiftUI

Hello everyone,

I have encountered a very strange issue with my SwiftUI code, and I'm hoping you can help me resolve it. Let me explain in more detail how my code works.

In my main view (ContentView), I have a navigation bar (AppBarView) that can collapse and expand based on the scroll position of the page. I also use a TabView to display different views depending on the user's selection.

The problem arises when the navigation bar is expanded, and I scroll back up the page. My ScrollView behaves erratically, causing a shaking effect with an overlapping of the navigation bar and the ScrollView. To better understand the issue, please watch this video: https://www.youtube.com/shorts/LF0ZfwtiiNI

After conducting several searches, I have identified that the following line is causing the issue:

.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

Without this line, everything works fine, but I lose the desired visual effect provided by PageTabViewStyle. This is where I'm stuck because I don't understand why this line of code is causing the bug.

You can find the entire project here if you'd like to take a closer look: link to the GitHub project

Here is an excerpt of the relevant code:

struct ContentView: View {
    // ...
    var body: some View {
        NavigationView {
            ZStack(alignment: .bottomTrailing) {
                VStack(spacing: 0) {
                    AppBarView(show: self.$show, selection: $choice)
                    
                    TabView(selection: $choice) {
                        // ...
                    }
                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                }
            }
        }
        // ...
    }
}

struct AppBarView: View {
    // ...
    var body: some View {
        VStack(spacing: 25) {
            if self.show {
                // ...
            }
            HStack {
                Button(action: {
                    selection = 0
                }) {
                    // ...
                }
                // ...
            }
            // ...
        }
        // ...
    }
}

struct AfficherLesListesAReviserView: View {
    // ...
    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                LazyVGrid(columns: [GridItem(.adaptive(minimum: 110))], spacing: 20) {
                    ForEach(listes.filter { $0.prochaineRevisionDansMoinsDe(99) != nil && ($0.prochaineRevisionDansMoinsDe(99) ?? 0) <= 0 }.sorted(by: { $0.prochaineRevisionDansMoinsDe(99) ?? 0 > $1.prochaineRevisionDansMoinsDe(99) ?? 0 })) { liste in
                    }
                }
                // ...
            }
            // ...
        }
        // ...
    }
}

I would greatly appreciate it if you could help me find a solution to this issue. Feel free to ask me if you need any further information. Any assistance would be highly appreciated.

Thank you once again!

Weird Bug: Navbar Overlapping Issue with TabView and ScrollView in SwiftUI
 
 
Q