ListView fails to display correct ViewCell content intermittently #11598
Labels
area-controls-listview
ListView and TableView
platform/android 🤖
platform/iOS 🍎
s/triaged
Issue has been reviewed
s/verified
Verified / Reproducible Issue ready for Engineering Triage
t/bug
Something isn't working
Milestone
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
The text was updated successfully, but these errors were encountered: