ios – Centered ScrollView content doesn’t return to position after pull-to-refresh with a large navigation title in SwiftUI

It may be the modifier .containerRelativeFrame that is causing this problem. For content inside a ScrollView, the “container” is the ScrollView, but I am guessing that the size may change when a refresh is being performed and the activity indicator is showing.

I would suggest using a GeometryReader to measure the height of the area occupied by the ScrollView. Then:

• set the height of the ScrollView as the minimum height for the VStack
• the maximum width of the VStack can simply be set to .infinity
• the modifier .containerRelativeFrame can be removed.

You said you tried using a GeometryReader already and it didn’t work. However, you didn’t show how you tried it. Give it a try as follows:

NavigationStack {
    GeometryReader { geo in
        ScrollView(.vertical) {
            VStack(spacing: 30) {
                // ...
            }
            .frame(maxWidth: .infinity, minHeight: geo.size.height)
        }
    }
    .refreshable {
        try? await Task.sleep(for: .seconds(2))
    }
    .navigationTitle("Title")
}

You will notice from the gif above that the content inside the ScrollView jumps around in a jerky way when the activity indicator disappears and the content slides back up to fill the space. The reason for the sudden movement may be because there is some native animation involved (the title slides up smoothly) but the height of the VStack is being changed without animation, so the change in height is sudden.

To smooth out the movement, you could try to animate the change in height, but it is difficult to synchronize this with the native animation. Special measures are also needed when the view is first shown, otherwise the animation applied to the height causes the content to slide into position in a way that may not be desirable.

An alternative and perhaps simpler approach is to use a fixed amount of top padding to move the placeholder content closer to the center of the screen, instead of trying to center it exactly by setting a minimum height. Something like:

VStack(spacing: 30) {
    // ...
}
.frame(maxWidth: .infinity)
.padding(.top, geo.size.height > 400 ? 200 : 60)

The movement is much smoother with this approach: