XCode Version 12.4 (12D4e)
I have encountered this every time I have implemented a Lazy stack within a ScrollView:
- Add a
LazyHStack
to a horizontalScrollView
or aLazyVStack
to a verticalScrollView
- Add enough content such that the content size of the scroll view exceeds its bounds
Scenario 1 – Pull the scrollview beyond the bounds (as if you were pulling to refresh)
Expected behavior: It behaves as expected where the scrollview stays under your finger
Observed behavior: It stutters and jumps
Scenario 2 – Scroll fast to the edge so that it has to bounce
Expected behavior: It bounces smoothly
Observed behavior: It stops and jitters when it reaches the edge, but doesn’t bounce
My theory
My theory is that due to using a Lazy stack, when a view goes off the screen it gets removed from the view hierarchy, creating a stutter.
I’m wondering if anyone else has encountered this? Is this a bug in SwiftUI? I’ve reliably reproduced this for months across different projects and end up resorting to not using Lazy stacks which I wish I could.
Sample code
ScrollView {
LazyVStack {
ForEach(viewModel.items) { items in
SomeView(viewModel: .init(context: viewModel.context, item: item))
}
}
Note: Stutter only happens at the top of the scroll view
** Updated July 10, 2021 **
This is still happening in iOS 15, Version 13.0 beta (13A5155e).
In the video below, notice the behavior of the scrollbar and the stuttering when we get to the bottom:
** Updated July 19, 2021 **
I ripped everything out in my view and built it back up one by one — the LazyVStack begins to stutter as soon as I put a VStack/HStack/ZStack
around a simple Text
element.
If I add fixedSize(horizontal: false, vertical: true)
to the Text
element it seems to stop stuttering. As soon as I add a UIViewRepresentable
of variable height, it starts to stutter again.
It seems like in a LazyStack, every child needs to be some sort of fixed size or a purely SwiftUI view to work.
I’ll keep digging in. Must… solve…
7
Answers
I got a response from the DTS, and they confirmed it’s a bug, but no workaround. You can reference my feedback ID and file a feedback item. I imagine they’ll address it with the new swift version, because I think it’s probably a legacy defect, and might cause breaking changes. In other words, it has to do with the native components and navigation bar, and they have to break some things to fix it. This means SwiftUI apps in iOS 14 might not be compatible, ever. But I’m just speculating. I’ll let everyone know if I get any news. It’s really a major blocker, and completely ruins the user experience IMO.
I have confirmed that the issue is resolved in iOS 15. Unsure if this helped, but also recompiled the app with Xcode 13. 🚀
I can confirm the stutter issue is still present in iOS 15 with Xcode 13. I am not sure what is causing it, but it seems related to the way LazyStacks create and layout items.
This is a MWE that reproduces the problem:
In this example the frame of the red color seems "wide enough" to cause the stutter when bouncing on the leading edge of the screen.
Reducing the width slightly makes the stutter go away:
Note: tested on an iPhone Xs Max with Xcode 13 beta 1 and iOS 15 beta 1. For this particular example the issue only happens on the device (maybe because I cannot scroll fast enough on the simulator). But I’ve had this issue on more complex views on the simulator too.
Try disabling the ScrollView bounce.
Add the below line in onAppear or init,
UIScrollView.appearance().bounces = false
I added a clear rectangle
and it seemed to solve most of my problems I have with stuttering in the LazyVStack under ScrollView.
I had a very similar issue and disabling the
edgesForExtendedLayout
worked for me.If the SwiftUI view is used within a UIHostingController you could try adding the following to the
UIHostingController
subclass:This was reproducible under xcode 13.2.1 and iOS 15.2
This still seems to be an issue on IOS 16. I am unable to fix it on the simulator but the answer by user14518353 seems to work on a device. For those who cannot find the mentioned users answer add this to onAppear or init –
UIScrollView.appearance().bounces = false
EDIT:
While it mostly seems fixed i have managed to reproduce the issue once with the above fix & adding Rectangle().foregroundColor(.clear).frame(height: 1.0) to the top of the LazyVStack seems to also help. Currently I recommend setting both bounces and adding in the rectangle as that combination seems to be the best fix for me.