ScrollView with .viewAligned and .scrollPosition() not updating on orientation / size changes

Question

The scroll position is not updated when orientation changes in a ScrollView with .scrollTargetBehavior(.viewAligned) and .scrollPosition().

import SwiftUI

struct ContentView: View {
    let colors: [Color] = [.red, .yellow, .cyan, .blue, .teal, .brown, .orange, .indigo]
    @State private var selected: Int? = 0
    
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 0) {
                ForEach(0..<colors.count, id: \.self) { index in
                    Rectangle()
                        .fill(colors[index])
                        .containerRelativeFrame(.horizontal)
                        .overlay {
                            Text(colors[index].description)
                        }
                }
            }
            .scrollTargetLayout()
        }
        .scrollPosition(id: $selected)
        .scrollTargetBehavior(.viewAligned)
    }
}

#Preview {
    ContentView()
}

@main
struct ViewAlignedScrollBugApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Tested on Xcode 15.3 (15E204a), iOS 17.3.1 iPhone, iOS 17.4 Simulator.

Feedback FB13685677 was submitted to Apple, but in the meantime maybe I am missing something?!

Also on Developer Forums: https://developer.apple.com/forums/thread/748349

Answer 1

Did you try using the TabView? TabView set to .page is a similar solution that works with orientation changes.

Like this:

Here is example code:

struct ContentView: View {
    let colors: [Color] = [.red, .yellow, .cyan, .blue, .teal, .brown, .orange, .indigo]
    
    var body: some View {
        TabView {
            ForEach(colors, id: \.self) { color in
                Rectangle()
                    .fill(color)
                    .overlay {
                        Text(color.description)
                    }
            }
        }
        .tabViewStyle(.page)
    }
}

Also, if page indicators are not needed then use:

.tabViewStyle(.page(indexDisplayMode: .never))