ScrollView inside Pager() caused vertical padding issue

[boompikachu]

When inserting a View() that has a fullscreen ScrollView() in Pager(), the Pager() will have a padding issue on the top and the bottom of the ScrollView(). From my findings (not sure), the Pager() does follows the safe area while the View() inside the Pager() doesn't causing the Pager() to cut some portion of the ScrollView() out. This can be seen in the following photo:

ContentView()

` import SwiftUI import SwiftUIPager

struct ContentView: View {
    @State private var page: Int = 0
    let items = [1,2,3,4,5]

    var body: some View {
        TabView() {
            Pager(page: self.$page,
                  data: items,
                  id: \.self,
                  content: { item in
                    SecondView()
            })
                .tabItem {
                    Image(systemName: "star")
            }
            Text("Hello")
                .tabItem {
                    Image(systemName: "circle")
            }
        }
    }
}

`

SecondView()

` import SwiftUI

struct SecondView: View {
    @State private var pickerState: Int = 0

    var body: some View {
        ScrollView() {
            VStack() {
                Circle()
                    .frame(width: 200, height: 200)
                Text("This is a circle")
                Picker(selection: $pickerState, label: Text("")) {
                    Text("Choice 1").tag(0)
                    Text("Choice 2").tag(1)
                }.pickerStyle(SegmentedPickerStyle())
            }
            .padding(.horizontal)
            .padding(.top)

        }
    }
}

`

I found the temporary fix which is to add padding to the ScrollView() but this will cause a small white line between the view and the nav bar as follows:

[boompikachu]

This bug doesn't occur when wrap in NavigationView

[fermoya]

Hi @boompikachu ,

I have a workaround for you because this seems like a SwiftUI issue. I'm debugging your code on an iPhone Pro Max, the available space for Pager is (412.0, 769.0). If no itemAspectRatio provided, this is the size that's set to the page. Now, if you apply .frame(width: 412, height: 769) to SecondView, you still have the problem. Try setting one pixel less for the height and your problem is solved, .frame(width: 412, height: 768).

So the workaround is this: use padding(1) to give 1 pixel of top and bottom padding to the Pager and it works perfect.

Pager(page: self.$page,
           data: items,
           id: \.self,
           content: { item in
               SecondView()
 }).padding(1)