[Bug] CollectionView refresh glitch (iOS)

[ryanbrookepayne]

Description

When refreshed repeatedly, a CollectionView backed by an ObservableCollection has an animation glitch.

Steps to Reproduce

1. Create a CollectionView backed by an ObservableCollection
2. Include a Label with IsVisible and BackgroundColor properties
3. Refresh the CollectionView by calling the ObservableCollection.Clear method and re-adding all the items back in
4. In the app, refresh the CollectionView repeatedly

Expected Behavior

The CollectionView animation refreshes in a smooth manner.

Actual Behavior

The CollectionView animation refreshes in a smooth manner sometimes but other times is jumpy and glitchy (showing the invisible elements for a split second).

Basic Information

• Version with issue: 5.0.0.2012
• Last known good version: unknown
• Platform Target Frameworks:
  • iOS: 14.4
  • Android: N/A
  • UWP: N/A
• Android Support Library / AndroidX Version: N/A
• NuGet Packages: N/A
• Affected Devices: iOS phones

Environment

Show/Hide Visual Studio info

JetBrains Rider 2021.1.2
Build #RD-211.7142.19, built on April 22, 2021
Runtime version: 11.0.10+9-b1341.41 x86_64
VM: Dynamic Code Evolution 64-Bit Server VM by JetBrains s.r.o.
macOS 11.4
.NET Core 5.0.5
GC: G1 Young Generation, G1 Old Generation
Memory: 1500M
Cores: 8
Registry: debugger.new.debug.tool.window.view=true, ide.tree.horizontal.default.autoscrolling=false, performance.watcher.sampling.interval.ms=200, ide.borderless.tab.caption.in.title=false, ide.tooltip.showAllSeverities=true, show.diff.preview.as.editor.tab=true, light.edit.file.open.enabled=false, performance.watcher.unresponsive.interval.ms=1000, search.everywhere.settings=true, show.diff.preview.as.editor.tab.with.single.click=true, ea.enable.developers.list=false, parameter.info.max.visible.rows=10, ide.win.file.chooser.native=true, vcs.log.show.diff.preview.as.editor.tab=true, actionSystem.fix.alt.gr=false, search.everywhere.pattern.checking=false, ide.tooltip.initialDelay=0, ide.mac.bigsur.window.with.tabs.enabled=false, ide.require.transaction.for.model.changes=false, ide.debug.in.title=true, rdclient.asyncActions=false
Non-Bundled Plugins: Abc.MoqComplete.Rider (1.4.7), com.intellij.resharper.StructuredLogging (2021.1.2.140), nsubstitutecomplete-rider (1.4.1), com.jetbrains.rider.android (211.7142.19)

Build Logs

No build errors or issues

Screenshots

2021-05-27_11-48-38.mp4

Reproduction Link

https://github.com/ryanbrookepayne/xamarin.forms-collectionview-refresh-glitch

Workaround 1: Add delay

Add a delay to the collection refresh. However, in a large scale production app this may not be feasible when using the Model View View Model (MVVM) architecture.

private async void ClearAndReloadRestaurants(object sender, EventArgs e)
{
    Restaurants.Clear();

    // This fixes the animation problem but may not scale in a larger app
    await Task.Delay(100);

    RefreshRestaurants();
}

Workaround 2: Use a StackLayout

Instead of a CollectionView, use a StackLayout with a BindableLayout property. The tradeoff is that you lose the smooth animation when the collection is refreshed.

<StackLayout Spacing="0" BindableLayout.ItemsSource="{Binding Restaurants}">
    <BindableLayout.ItemTemplate>
        ...
    </BindableLayout.ItemTemplate>
</StackLayout>