SwiftUI symbol effects animate on scrolling list only when in Stack view

When: Embedding a Image with a symbol effect in a stack view in SwiftUI, and putting this in a List

Actual: The symbols animate when scrolling that item in and out of the view

Expected: The symbol doesn't animate until the value changes.

I have the following code which is boiled down from my actual code where the animating value is a @Model object property (other animations work fine when their animation's value is watching the same property.)

I've boiled it down to the below examples:

The top example works as expected (no symbol animations on scroll) The bottom example animates the symbols every time they scroll in to view

#Preview {
    VStack {
        List {
            ForEach(1...100, id: \.self) { index in
                Image(systemName: "square.3.layers.3d")
                    .symbolEffect(.bounce, value: index)
            }
        }
        
        List {
            ForEach(1...100, id: \.self) { index in
                HStack {
                    Image(systemName: "square.3.layers.3d")
                        .symbolEffect(.bounce, value: index)
                }
            }
        }
    }
}

This happens on Mac and iOS.

I'm running Xcode 15.3 RC2 but it also happens in Xcode 15.2

I've found this will happen whether embedding in a HStack, VStack or ZStack but seems fine in a Group.

I've tried adding a id() modifier to the HStack to give it an explicit identifier but this doesn't seem to work.

Is there something I'm missing here?

Answered by Adamc93 in 781799022

For anyone else stuck in this issue see the SO answer I accepted here:

https://stackoverflow.com/a/78106284/1735584

Group docs: https://developer.apple.com/documentation/swiftui/group

Use a group to collect multiple views into a single instance, without affecting the layout of those views, like an HStack, VStack, or Section would.

Accepted Answer

For anyone else stuck in this issue see the SO answer I accepted here:

https://stackoverflow.com/a/78106284/1735584

Group docs: https://developer.apple.com/documentation/swiftui/group

Use a group to collect multiple views into a single instance, without affecting the layout of those views, like an HStack, VStack, or Section would.

SwiftUI symbol effects animate on scrolling list only when in Stack view
 
 
Q