ScrollView + LazyStacks stutter

2k Views Asked by At

I've had many similar issues to this when using ScrollViewand LazyVStack/ LazyHStack where the content of the lazy stack will stutter upon bouncing on the edge of the ScrollView.

First I thought it might be due to using complex Views on the lazy stack that would cause layout issues in SwiftUI but I've manage to come up with a MWE that uses a very simple view hierarchy and the issue is still there.

This causes a stutter when scrolling fast to the left and upon bouncing on the leading edge of the ScrollView:

ScrollView(.horizontal) {
    LazyHStack {
        Color.red.frame(width: 450)
        Color.green.frame(width: 250)
        Color.blue.frame(width: 250)
    }
}
.frame(width: 350)

Decreasing the width of the first view makes the stutter go away

ScrollView(.horizontal) {
    LazyHStack {
        Color.red.frame(width: 400) //<- No stutter
        Color.green.frame(width: 250)
        Color.blue.frame(width: 250)
    }
}
.frame(width: 350)

For this MWE the stutter only seems to happen on the device (maybe because I can't scroll fast enough in the simulator). However, I've had the same problem happen in the simulator with more complex views.

Any ideas if this is a bug in SwiftUI?

Tested on an iPhones Xs Max with Xcode 13 beta 1 and iOS 15.

0

There are 0 best solutions below