iOS Collectionview jitters / scrollskips on iPhone 14 simulators / devices (even in .NET 8)

[edgiardina]

Description

When I have a collectionview with 50-100 items in it, the scrolling on iPhone 14 devices ends up skipping or jittering, causing massive user frustration

I've reproduced this on .NET 7 and .NET 8 (and my production app has received customer complaints to that effect as well).
this does NOT reproduce on an iPhone 12 or an iPhone SE simulator or devices. Only on iPhone 14 Pro + iPhone 14 Pro Max simulators (I think its the floating notch perhaps)

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-08-19.at.15.33.33.mp4

Steps to Reproduce

Create a new MAUI app
Create a CollectionView as seen in the reproduction repository
Bind to a datasource
try to scroll on an iPhone 14 device
Decently down the list the scrollbar will freak the eff out.

Link to public reproduction project repository

https://github.com/edgiardina/MauiBug_JitterScroll

Version with bug

8.0.0-preview.7.8842

Is this a regression from previous behavior?

Yes, this used to work

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iPhone 14 variations, iOS 16.4 and above

Did you find any workaround?

No response

Relevant log output

No response

[drasticactions]

Your sample is missing a StaticResource

[edgiardina]

Pushed a style change to add it. very surprised my example built and ran without it. I've pushed a fix @drasticactions; the bug persists

[drasticactions]

The root issue is with the dynamic height of the items. I've created a reproduction project to show this: https://github.com/drasticactions/MauiRepros/tree/main/MauiCollectionViewScroll

RPReplay_Final1692582393.MP4

Scrolling is fine if you have a fixed height on each item in the template. When the height is dynamic and variable, that's when scrolling "jitters." When I tested this on my iPad Mini, it worked fine. The inner contents of the cell don't matter; it's the height alone. If you want to work around this, set a fixed height on your outer StackLayout, and it should work.

@rolfbjarne Do you know of good ways to debug UICollectionView issues like this? Could this be constraint issues?

[edgiardina]

Thank you for the insight. Unfortunately some titles for events or player names are more than one line high, so a fixed height will not work in that scenario. I would use a ListView with "HasUnevenRows = true" but unfortuantely ListView performance and virtualization is rather poor in iOS, at least for .NET 7. If I recycle all elements, I get poor performance, if I retain all elements, I get missing / phantom rows that don't display. So I need to use a CollectionView, and since MAUI doesn't have a variable text-size option yet, I need to allow for line wrap.

I still am a bit surprised that I can't reproduce the jitter on my iPhone 12, or on iPhone SE simulators.

[realchrisparker]

I am seeing this issue as well using .NET 7 and Visual Studio 17.7.1 on an iPhone 14 physical device running iOS 16.6. I only have 10 items and it jitters. This bug seems fairly new as it wasn't doing this a few weeks ago.

[rolfbjarne]

@rolfbjarne Do you know of good ways to debug UICollectionView issues like this? Could this be constraint issues?

I would try using Instruments.

• https://www.allaboutswift.com/dev/2016/8/9/debugging-collection-view-performance-issues
• https://developer.apple.com/documentation/xcode/improving-app-responsiveness#Detect-and-analyze-hitches-using-Instruments

[filipleifer]

We have same problem but CollectionView is grouped. When items have different height the collection is broken after scroll down. Can you fix this asap to .NET 8 release ? Thanks

[v0idzz]

Unsure if this is a regression. Just observed the same behavior on iPhone devices with dynamic island in Xamarin.Forms which suggests this bug has been there for a longer time.

[metalium84]

To me it looks like it's definitely related to devices with dynamic island feature, i.e. it works on iPhone 14 but doesn't work on iPhone 14 Pro and iPhone 15.
For us, this is a complete showstopper to use our app on mentioned (new) devices!
Will this get any attention? And are there any known workarounds besides using ListView (which has other issues for us...) or stopping to use dynamic sizes of the collection items?

[AlleSchonWeg]

Just an idea. You could try the sharpnado collectionview or the devexpress cv. And an articel about the cv performance: https://www.sharpnado.com/xamarin-forms-maui-collectionview-performance-the-10-golden-rule/

[v0idzz]

@metalium84 is this bug still happening to you on .NET 8? Asking out of curiosity. For me, the solution was to go with Xamarin.Forms which seems to be more stable than MAUI for now. So now, I'm patching CollectionView myself.

[metalium84]

@AlleSchonWeg Thanks a lot for your suggestion and sharing this interesting article with me! I'll try to refactor my implementation accordingly.

[metalium84]

@v0idzz

@metalium84 is this bug still happening to you on .NET 8? Asking out of curiosity. For me, the solution was to go with Xamarin.Forms which seems to be more stable than MAUI for now. So now, I'm patching CollectionView myself.

Yes, it's still happening on .NET 8 (iOS 17.2). Why are you supposing to go back to XF? As I've found xamarin/Xamarin.Forms#15782 where you're reporting the same issue on XF...?

[metalium84]

Isn't this actually the same issue as #12221 which has been wrongly marked as duplicate of #3643 and still isn't fixed...?

[realchrisparker]

I’ve been a Microsoft guy my whole career, but they have really screwed the pooch with Maui. To me it appears Microsoft hasn’t put a large enough dev team behind it and they are drowning in bugs. They also seem to focus on new releases instead of bug fixes. Our teams app was 75% done and I ordered the stop of development. The way Microsoft is handling Maui and the countless bugs and workarounds you have to do makes it unattainable for enterprise development. I’m a Microsoft advocate , but I had my teams switch to Flutter. Flutter is what Maui should be. My advice guys, switch to Flutter and you will actually get your app down. Bye Maui!

[v0idzz]

@metalium84 Well, I used to face this issue on iPhone devices with dynamic island on XF, but I managed to patch the iOS CollectionView implementation myself, so it doesn't really happen anymore. I didn't bother myself trying to fix it in MAUI because the XF -> MAUI migration path had been rather unpleasant for me and I decided to stick with XF for now.

[metalium84]

@v0idzz

@metalium84 Well, I used to face this issue on iPhone devices with dynamic island on XF, but I managed to patch the iOS CollectionView implementation myself, so it doesn't really happen anymore. I didn't bother myself trying to fix it in MAUI because the XF -> MAUI migration path had been rather unpleasant for me and I decided to stick with XF for now.

Would you be so kind to share with me how you managed to patch the iOS CollectionView on XF so you got rid of the issues? Maybe I could adapt to MAUI then...

[v0idzz]

@metalium84 Sure. I changed the sizes equality check here:
https://github.com/xamarin/Xamarin.Forms/blob/5.0.0/Xamarin.Forms.Platform.iOS/CollectionView/ItemsViewLayout.cs#L559
to:
https://github.com/Vulcanova/Vulcanova/blob/main/Vulcanova/Vulcanova.iOS/CollectionView/ItemsViewLayout.cs#L546

Additionally, in my case CollectionView Headers turned out to be causing some issues too, so I decided to render them as collection items with their own DataTemplate.

[metalium84]

@v0idzz Thanks a lot! Right now, I don't see a way to adapt this to MAUI without spending too much time. But maybe it's gonna be a hint for the MAUI developers at least ;-)

[kevinxufei]

This problem was verified using Visual Studio Enterprise 17.10.0 Preview 1. The sample project had scrolling jumps on the iPhone15 Pro (17.0) platform.

[rmarinho]

This works fine on latest stable on net8. The initial project was using net7.0-ios versions that's why reproduced on Visual Studio Enterprise 17.10.0 Preview 1.. Updating to net8.0 workloads with.NET MAUI 8.0.7 works fine.