SwiftUI - Horizontal ScrollView locks up when transitioning from the bottom

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 (e.g. `.leading`).


Has anyone else come across anything like this?

Accepted Reply

Found the answer - needed to configure the min and max height for the 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(minHeight: 0, maxHeight: .greatestFiniteMagnitude)
        }
        .frame(height: 100)
        .transition(.move(edge: .bottom))
    }
}

Replies

Found the answer - needed to configure the min and max height for the 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(minHeight: 0, maxHeight: .greatestFiniteMagnitude)
        }
        .frame(height: 100)
        .transition(.move(edge: .bottom))
    }
}
In my case, I have also set the height of ScrollView to something bigger than 115, otherwise it still locks up. The problem is 116 is too high for my case.


Code Block
ScrollView(.horizontal, showsIndicators: false) {
      HStack {
        ForEach(options, id: \.value) { item in
          Text(item.label).frame(width: 50)
        }
      }.frame(minHeight: 0, maxHeight: .greatestFiniteMagnitude)
    }.frame(height: 116) // 115 and below not works