Skip to content

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

@mleykhner

Description

@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

2023-02-20.11.30.13.mov

Environment:

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions