Skip to content

[Ask] macOS: Vertical Pager shows unwanted outer padding #341

@tamnh-maplelabs

Description

@tamnh-maplelabs

On macOS, using SwiftUIPager in vertical mode, each page shows a thin outer margin (background “halo”) even when each page view is sized to the window and .expandPageToEdges() is applied.

Expected behavior
• Each page should fill the available space exactly (full-bleed) with no visible margins around the page content.
• If there are default insets, there should be a public API to set them to zero.

Actual behavior
• A teal color thin border/margin remains visible around pages (seen as the parent background color).
• Button move up at page 2 does't work

Environment
• SwiftUIPager: 2.5.0
• macOS: 15.5
• Xcode: 16.3
• Swift: 6.0

Minimal Reproducible Example
`
import SwiftUIPager

struct HomeView: View {
@State private var name: String = ""
@State private var countdown: Int = 60
@StateObject private var page: Page = .first()
@State private var mouseIsOnCards = false

var body: some View {
    GeometryReader { geo in
        Pager(page: page,
              data: [0, 1],
              id: \.self) { pageIndex in
            VStack(spacing: 20) {
                if pageIndex == 0 {
                    Text("Countdown: \(countdown)")
                        .font(.largeTitle)
                    Button {
                        withAnimation {
                            page.update(.next)
                        }
                    } label: {
                        Image(systemName: "arrow.down.circle.fill")
                            .font(.system(size: 40))
                            .foregroundColor(.purple)
                    }
                } else if pageIndex == 1 {
                    TextField("Enter name", text: $name)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding(.horizontal)
                    Button("Add") {
                    }
                    .font(.title2)
                    .padding()
                    .background(Color.red)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                }
            }
            .frame(width: geo.size.width, height: geo.size.height)
            .background(pageIndex == 0 ? .black : .white)
            .overlay(alignment: .bottomTrailing) {
                if pageIndex == 1 {
                    Button {
                        page.update(.moveToFirst)
                    } label: {
                        Image(systemName: "chevron.up.circle")
                            .font(.system(size: 40))
                            .background(Color.blue, in: .circle)
                    }
                }
            }
        }
        .pagingPriority(.simultaneous)
        .vertical()
        .interactive(scale: 1.0)
        .swipeInteractionArea(.allAvailable)
        .sensitivity(.medium)
        .expandPageToEdges()
        .background(Color.green)
    }
    .background(Color.orange)
}

}
`

What I’ve tried
• Ensured each page view is frame(width: geo.size.width, height: geo.size.height).
• .expandPageToEdges(), .itemSpacing(.zero) (also tried without), .padding(.zero).
• Different modifier orders.
• Verified the margin is not from my own .padding (none present on the page container).

Questions
1. Is there a built-in way to remove any default insets/margins so a vertical Pager on macOS can be truly full-bleed?
2. Any recommended modifier order to guarantee no outer padding on macOS?
3. How to config button at page 2 correct to work

Image

Thanks and regards,

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions