swift – iOS 17 SwiftUI: Color Views in ScrollView Using containerRelativeFrame Overlap When Scrolling

I’m encountering a layout issue in SwiftUI on iOS 17 where Color views within a VStack inside a ScrollView begin to overlap as I scroll down. Each Color view is supposed to take up the full container’s relative frame, but as I scroll, the next Color view encroaches upon the space of the previous one. This issue compounds with further scrolling, with subsequent views taking more and more space.

I have attached a video to demonstrate the issue, and here is the code to reproduce the problem. Just copy and paste it.

struct TestView: View {
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 0) {
                ForEach(0..<10, id:\.self) { idx in
                    Color.random()
                    .containerRelativeFrame([.horizontal, .vertical])
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.paging)
    }
}

#Preview {
    TestView()
}

I’m using .containerRelativeFrame([.horizontal, .vertical]) for each color view to make them fill the available space, and .scrollTargetLayout() on the VStack. The .scrollTargetBehavior(.paging) modifier is applied to the ScrollView to enable paging behavior.

The expected result is for each color view to occupy its own page space without affecting the others. However, when I scroll, the layout starts to break as shown in the video.

Has anyone experienced something similar or can provide insight into what might be causing this issue?

My Environment:

Simulator running version: iOS 17.0

XCode Version: 15.0.1 (15A507)

Swift Version: swift-driver version: 1.87.1 Apple Swift version 5.9 (swiftlang-5.9.0.128.108 clang-1500.0.40.1) Target: x86_64-apple-macosx13.0