search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.99k stars 1.72k forks source link

ListView with DataTemplate: rendering and scrolling broken on iOS #24308

Open janusw opened 3 weeks ago

janusw commented 3 weeks ago

Description

Any ListView with a DataTemplate is broken on iOS. This can easily be observed on the ListViewDemos in the maui-samples. Any of the samples with a DataTemplate seem to be affected. Here are screenshots of the "ListView with DataTemplate" example on an iPhone 8 (with iOS 16.7):

iOS (top of list) iOS (scrolled to bottom)
ListView_iOS_top ListView_iOS_bottom

There rendering is completely broken on iOS. In particular the image and text of a particular item overlaps with the following item. (On Android only the top of the image and the first line of text is visible. Anything that is outside of the cell is invisible.)

In addition, the end of the list is not visible properly when scrolling all the way down. A part of the last item becomes visible shortly when dragging further, but then snaps back when releasing the finger.

Possibly the height of the cell is not computed properly (leading to these effects)? This is a pretty serious bug and basically blocks any advanced use of the ListView.

PS: Apparently this is how it should look like (so I guess Android is also broken): https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/media/listview/datatemplate.png?view=net-maui-8.0

(from the List View documentation: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/listview?view=net-maui-8.0)

Steps to Reproduce

  1. Build and run the ListViewDemos project on an iOS device.
  2. Select "ListView with DataTemplate".
  3. The rendering is messed up and scrolling does not work all the way to the bottom.

Link to public reproduction project repository

https://github.com/dotnet/maui-samples/tree/main/8.0/UserInterface/Views/ListViewDemos

Version with bug

8.0.80 SR8

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

observed on iOS 16 & 17

Did you find any workaround?

No response

Relevant log output

No response

github-actions[bot] commented 3 weeks ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

Closed similar issues:

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

janusw commented 3 weeks ago

Open similar issues:

* ...

* [ListView rendering on Mac Catalyst is wrong (#18811)](https://github.com/dotnet/maui/issues/18811),  similarity score: 0.81

This one is indeed very much related. I guess I missed it, because it only mentions Mac Catalyst in the title.

The issue might even affect all platforms (haven't tested Windows).

Btw, the workaround from #18811 (i.e. using HasUnevenRows="True") indeed seems to fix the rendering both on iOS and Android. However, it still is only a workaround and not a fix. (All the rows in the example have the same height, after all.)

ninachen03 commented 3 weeks ago

I can repro this issue at iOS platforms on the latest 17.12.0 Preview 1.0(8.0.80 & 8.0.72 & 8.0.3).