ListView fails to display correct ViewCell content intermittently

[petermauger]

Description

Variable, intermittent visual glitches when utilising ListView + HasUnevenRows.

The most common is that the area for a ViewCell appears to be left 'blank'. There should be a cell with some view components (indeed if you look at the Visual Studio 'Live Visual Tree' every cell has the expected Elements) but instead there is just blank space about the size of the content you expected to see.

If you set a BackgroundColor against the ViewCell you'll see a different outcome, which is that a rectangle the same color and size as another ViewCell in the list will display with no other cell content. In this scenario if the 'original' version of the cell has content that is quite tall then the 'clone' cell will render its colored rectangle over the top of cells below its position.

If there is a DataTemplateSelector being used and the 'root' element (under ViewCell) in the DataTemplates being switched between has a different 'Handler' (ContentView and ScrollView based cells in the same ListView for example) then the problem is dramatically worse. Happens almost every third cell as a rendering glitch and, for Android, causes the app to immediately terminate due to a JNIException (which indicates that a view being attached to a parent already has a parent view I think?).

Having explored the MAUI code base (as well as xamarin-macios), and having run into cell re-use issues before, I can strongly recommend that the problem lies in the cells themselves failing to have their re-use correctly handled.

Steps to Reproduce

Pull the attached public repository.

Run the app on an iOS simulator.
Start with the 'Bad Template' tab. Scroll the list down and up. Red cells are 'simple' and Green cells are 'scroll' types. The list should have entirely red or green cells. You will quickly discover Blue which is the background color for the ListView. This should not be visible and represents an incorrectly rendered cell.
Next go to 'Safe Template' tab. You should notice considerably less Blue spaces appearing. The ONLY difference between this view and 'Bad Template' is that the ScrollView is 'wrapped' inside a ContentView. This prevents the Handler being 'changed' during cell reuse and makes the occurrence of the blue spaces significantly less frequent.
Finally the 'Simple' tab. You may need to scroll for quite a while to see a blue space but they do occur. Try changing your scrolling direction from down to up periodically until you get the glitch occur. This is a super simple and straightforward scenario and shouldn't be experiencing visual glitches.

Run the app on an Android Emulator
Go to the 'Bad Template' tab. Scroll down for a while. Very shortly after you switch and scroll up the app will crash completely.

All of the experiments that demonstrated these behaviours have been built on an M1 macos Monterey laptop. The behaviours are identical on iPhones and Android phones when deployed, regardless of debug/release build.

Link to public reproduction project repository

https://github.com/petermauger/MAUIiOSBug

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

iOS14-16. Android29-33

Did you find any workaround?

The worst of the behaviour (crashing Android and extremely frequent glitching of cells on iOS) can be avoided by ensuring the ViewCell.View in your data templates are the same regardless of which template is selected (obviously this will be the case if only using a single template).

I have found no solution to the intermittent visual glitch in simple (or 'safe template') scenarios. I've hooked every event I can find for both the ViewCell and the content inside it and there are no obvious triggers for the problem.

Relevant log output

Visual Studio (for mac 2022 Preview latest) occasionally allows me to catch exceptions inside the MAUI code base and the Android crashing exception is firing inside the ViewCell re-use code ONLY when the old Handler and the new Handler are different types (but NOT every time this is the case unfortunately). Unfortunately I have 'lost' this ability for the last day or so and so haven't been able to get a record of the code where the failure occurs :(. 

There is no apparent signs in any logs on the iOS side, and Android only when a crash occurs. The following is the Device Output logs from an Android emulator when the crash occurs. Visual Studio CANNOT catch the crash (at the moment).

ioscellreusebu] java_vm_ext.cc:579] JNI DETECTED ERROR IN APPLICATION: JNI FindClass called with pending exception java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
[ioscellreusebu] java_vm_ext.cc:579]   at void android.view.ViewGroup.addViewInner(android.view.View, int, android.view.ViewGroup$LayoutParams, boolean) (ViewGroup.java:5247)

... TOO much output for the Issue submission to allow (max 65536 characters). It's easy enough to reproduce with the attached project if you need this bit

[ioscellreusebu] runtime.cc:677] 
[ioscellreusebu] runtime.cc:677]     in call to FindClass
[ioscellreusebu] runtime.cc:677]     from android.view.View crc64e1fb321c08285b90.ListViewAdapter.n_getView(int, android.view.View, android.view.ViewGroup)
[libc] Fatal signal 6 (SIGABRT), code -1 (SI_QUEUE) in tid 24176 (ioscellreusebug), pid 24176 (ioscellreusebug)

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[petermauger]

@jsuarezruiz I was hoping this might get triaged with higher priority? This is an absolute blocker for us releasing our app and has no apparent workarounds. I can't see how anyone can reliably release an iOS MAUI app with ListView with this issue being present?

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 1.0. This issue repro on Android 13.0-API33 and iOS 16.4 with below Project:
MAUIiOSBug.zip

iOS 16.4: Blue spaces displays in Bad Template, safe template and Simple tabs.

Android application crashed with exception:
JNI DETECTED ERROR IN APPLICATION: JNI CallObjectMethodA called with pending exception java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.

[ankitapatelNew]

Is there any update regarding this issue? It's preventing me from releasing my app.