fermoya / SwiftUIPager

Native Pager in SwiftUI
MIT License
1.27k stars 166 forks source link

[BUG] Weird moving transparent Image appearing when scrolling fast. #307

Open danstorre opened 1 year ago

danstorre commented 1 year ago

Describe the bug Transparent image across the whole page view when swiping too fast to the right.

To Reproduce

Note: Set images from your Asset folder by setting the array pages.

let pages: [String] = [
    "#image1",
    "#image2",
    "#image3",
    "#image4",
    "#image5"
]

struct InfiniteExampleView: View {
    @StateObject var page = Page.first()
    @State var isPresented: Bool = false
    var data = Array(0..<5)

    var body: some View {
        ZStack {

            Pager(page: self.page,
                  data: self.data,
                  id: \.self) {
                self.pageView($0)
            }
                  .pagingPriority(.simultaneous)
                  .loopPages()
                  .itemSpacing(0)

        }
        .edgesIgnoringSafeArea(.all)
    }

    func pageView(_ page: Int) -> some View {
        PageView(image: pages[page])
            .clipped()
            .edgesIgnoringSafeArea(.all)
    }

}

public struct PageView: View {
    let image: String

    public init(image: String
    ){
        self.image = image
    }
}

extension PageView {
    public var body: some View {
        ZStack(alignment: .bottomLeading) {
            Image(image)
                .resizable()
                .scaledToFill()

            LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .top, endPoint: .bottom)
                .frame(height: 600)

            VStack(spacing: 22) {
                HStack {
                    VStack(alignment: .leading, spacing: 20) {
                        Text("a title")
                        Text("another title")

                    }

                    Spacer()
                }
            }
        }
    }
}

Expected behavior The page view should scroll normally without showing a strange moving transparent image when doing the swiping.

Screenshots / Videos

Environment:

Additional context Just run the code above, you'll see the issue.

Btw, Amazing works guys! keep it up!

https://user-images.githubusercontent.com/12664335/209736364-2e7ee9fb-76ce-445d-81e2-ad5469c38195.mp4