[BUG] The element inside of Pager is hidden when when it goes beyond the screen border

[mleykhner]

Describe the bug In my code I have HStack with Buttons inside of Pager. Button's label is Text view with RoundedRectangle as it's overlay.

Pager(page: vm.selectedWeekPage, data: vm.deltaWeeksArray, id: \.self) { deltaWeek in
                    HStack{
                        ForEach (vm.fetchWeek(vm.deltaWeek(delta: deltaWeek)), id: \.self){
                            day in
                            Button {
                                vm.selectedDay = day
                            } label: {
                                    Text("\(vm.extractDate(date: day, format: "dd"))")
                                        .font(.custom("Unbounded", size: 20))
                                        .fontWeight(.bold)
                                        .foregroundColor(Color(tm.getTheme().foregroundColor))
                                        .frame(width: 42, height: 42)
                                        .overlay(content: {
                                            RoundedRectangle(cornerRadius: 15, style: .continuous)
                                                .stroke(lineWidth: 2)
                                                .foregroundColor(Color(tm.getTheme().foregroundColor))
                                                .frame(width: 46, height: 46)
                                                .fixedSize()
                                        })
                                    .frame(maxWidth: .infinity)
                            }
                        }
                    }
                    .padding(.horizontal, 18)
                }
                .singlePagination()
                .pagingPriority(.simultaneous)
                .onPageChanged({ page in
                    if page >= vm.deltaWeeksArray.count - 2 {
                        (1..<4).forEach { _ in
                            vm.deltaWeeksArray.append((vm.deltaWeeksArray.last ?? 0) + 1)
                            vm.deltaWeeksArray.removeFirst()
                            vm.selectedWeekPage.index -= 1
                        }
                    } else if page <= 1 {
                        (1..<4).forEach { _ in
                            vm.deltaWeeksArray.insert((vm.deltaWeeksArray.last ?? 0) + 1, at: 0)
                            vm.deltaWeeksArray.removeLast()
                            vm.selectedWeekPage.index += 1
                        }
                    }
                })
                .itemSpacing(50)
                .frame(maxHeight: 48)
                .padding(.horizontal, -18)

Bug happens when I transition to different page. .stroke() hides when Button touches the edge of screen.

Expected behavior Button expected to be visible until it completely goes beyond the border of the screen.

Screenshots / Videos

https://user-images.githubusercontent.com/11536333/220052959-8d471fbe-fca2-4aa2-af87-7a0d83b4c455.mov

Environment:

• iOS 16.0
• iPhone 11 Pro Preview, iPhone 11 Pro
• 2.5.0

[THDGunner]

I also encountered the same problem. Have you solved it?

[THDGunner]

I fixed it with the .drawingGroup() func. Pager(xxx) { }.drawingGroup()