SwiftUI - Horizontal ScrollView locks up when transitioning from the bottom

Question

Essentially, whenever I attempt to transition a horizontally scrolling ScrollView using AnyTransition.move(edge: .bottom) the app freezes, and memory keeps going up. I've managed to reproduce the issue in the following:

struct ContentView: View {
    @State private var showScroll: Bool = false

    var body: some View {
        VStack {
            Spacer()
            Button(action: {
                withAnimation {
                    self.showScroll = true
                }
            }, label: {
                Text("Hit me")
            }).padding()
                .background(Capsule().fill())
            Spacer()
            if showScroll {
                scrollView
            }
        }
    }

    var scrollView: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
            }
        }
        .frame(height: 100)
        .transition(.move(edge: .bottom))
    }
}

Changing the ScrollView axis to .vertical prevents the app from hanging, as does changing the transition to a different edge (eg .leading ).

Has anyone else come across anything like this?

Answer 1

You need to configure HStack.

struct ContentView: View {
    @State private var showScroll: Bool = false

    var body: some View {
        VStack {
            Spacer()
            Button(action: {
                withAnimation {
                    self.showScroll = true
                }
            }, label: {
                Text("Hit me")
            }).padding()
                .background(Capsule().fill())
            Spacer()
            if showScroll {
                scrollView
            }
        }
    }

    var scrollView: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
            }.frame(maxHeight: .infinity)
        }
        .frame(height: 100)
        .transition(.move(edge: .bottom))
    }
}

Answer 2

Using .frame(minHeight: 0, maxHeight: .greatestFiniteMagnitude) instead of .frame(maxHeight: .infinity) gave me better results. ie . I could set any value for .frame(height: 100) and it would not freeze.

Answer 3

Confirm described behaviour in Simulator, in Preview all is ok. Xcode 11.2. Wrapping in VStack like below fixes the issue.

var scrollView: some View {
    VStack {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
            }
        }
        .frame(height: 100)
    }
    .transition(.move(edge: .bottom))
}