Buggy ScrollView + LazyVStack animation - is it fixable?

Question

The following code will render a list of items and a button to shuffle them and change their height withAnimation.

If you scroll down and shuffle it you will eventually see glitches in the animation, mostly consisting of ghost items animating on top of other items and disappearing.

Does anyone know why this is happening, and how to stop it happening? The issue goes away entirely if I use a VStack, but using a VStack brings its own problems.

import SwiftUI

struct Item: Identifiable {
  let id = UUID()
  var height: CGFloat
  var label: String
}

struct ContentView: View {
  @State private var items: [Item] =
    (0..<30).map { i in Item(height: .random(in: 80...220), label: "Row \(i)") }

  var body: some View {
    NavigationStack {
      ScrollView {
        LazyVStack(spacing: 8) {
          ForEach(items) { item in
            Text(item.label)
              .frame(maxWidth: .infinity)
              .frame(height: item.height)
              .background(.gray.opacity(0.15))
              .clipShape(RoundedRectangle(cornerRadius: 12))
              .padding(.horizontal)
          }
        }
        .padding(.vertical)
      }
      .navigationTitle("LazyVStack Demo")
      .toolbar {
        ToolbarItem(placement: .topBarTrailing) {
          Button("Shuffle") {
            withAnimation() {
              items.shuffle()
              for i in items.indices {
                items[i].height = .random(in: 80...220)
              }
            }
          }
        }
      }
    }
  }
}

#Preview { ContentView() }

You could try using Button("Shuffle") { items.shuffle() for i in items.indices { withAnimation { items[i].height = .random(in: 80...220) } } }, to alleviate the burden on withAnimation — workingdog support Ukraine
– workingdog support Ukraine, Commented Sep 18 at 2:22
This question is similar to: SwiftUI content jumping issue with LazyHStack embedded in a horizontal ScrollView in iOS 18. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — Benzy Neez
– Benzy Neez, Commented Sep 18 at 5:56

styke · Accepted Answer · 2025-09-19 10:52:57Z

0

I briefly noticed that the visual glitches were appearing alongside scroll position updates. This led me to consider the possibility of this being a ScrollView + LazyVStack automatic scroll preservation issue. Lo and behold, this fixes the problem:

var tx = Transaction()
tx.scrollContentOffsetAdjustmentBehavior = .disabled
tx.animation = .default
withTransaction(tx) {
  items.shuffle()
  for i in items.indices {
    items[i].height = .random(in: 80...220)
  }
}

answered Sep 19 at 10:52

styke

2,1862 gold badges27 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tim Sep 19 at 11:26

When I put the new logic next to old logic, I don't see a whole lot of a difference, if any. This may be a build-location issue. Also, I don't feel like I have a clear vision of what your desired result looks like.

styke Sep 20 at 10:37

I've added a video example of the buggy behavior I was talking about in the post. In case it's useful, I tested this on iOS 26/iPhone 15 pro.

Tim Sep 20 at 10:46

Video? Well if your satisfied, Im satisfied. Best regards. @styke

styke Sep 20 at 10:48

Sorry I'm trying to get the GIF under 10mb. Didn't think you'd notice so quickly lol. Bear with me.

Tim Sep 20 at 10:51

So you are satisfied with your results? I would bother posting the gif unless you still think there's room for improvement? @styke

Tim Sep 20 at 10:52

Have a good day. @styke

Collectives™ on Stack Overflow

Buggy ScrollView + LazyVStack animation - is it fixable?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related