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
22.28k stars 1.76k forks source link

CollectionView unusable on iPhone 14 Pro and iPhone 14 Pro Max #12221

Closed petermauger closed 1 year ago

petermauger commented 1 year ago

Description

Vertically scrolling CollectionView with variable sized cells has hundreds of unexplained cell resizes only on iPhone 14 Pro devices. Due to rapid resizing of all views the scrolling becomes extremely erratic typically resetting back to the top of the list. CollectionView control is unusable on listed devices. Apple will not allow apps built with CollectionView to be released on App Store with current problem.

Steps to Reproduce

  1. Pull repo
  2. Build and deploy to iOS 14 Pro or iOS 14 Pro Max simulator
  3. Select CollectionView tab
  4. Observe content renders correctly for first screen
  5. Attempt to scroll list down
  6. Any cell displaying significant blue content has been incorrectly sized (showing list background colour)
  7. Scrolling becomes erratic as the list is scrolled down (observe vertical scrollbar icon)
  8. Eventually list returns to top of content

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

Affected platform versions

iOS any but only iPhone 14 Pro devices

Did you find any workaround?

None as yet

Relevant log output

No log output indicating behaviour
angelru commented 1 year ago

The .NET MAUI team, can you pay attention to CollectionView? is full of very serious errors and this control becomes unusable.

ghost commented 1 year ago

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.

wubalubadubdub55 commented 1 year ago

Lot of issues with CollectionView.

petermauger commented 1 year ago

@rachelkang

"At this point, we will try to make a call regarding it's impact and severity. If the issue is critical, we may choose to include it in our current milestone for immediate handling or potentially patching. If the bug is relatively high impact, we will move the issue into the .NET V Planning (where V is the .NET version we're planning this for) milestone to review during our sprint planning meeting. If the impact is unclear or the is a very corner case scenario, we may move it to a next .NET V Planning or Backlog milestone to further evaluate the impact by reviewing customer up-votes / comments at a later time."

I just cannot fathom how this scenario is being judged as "the impact is unclear or the [bug] is a very corner case scenario"??? This is a 100% occurs scenario no matter what you do with the CollectionView. I don't know if you've ever tried to release an app on the Apple App Store before but they review the app, typically on their latest device. If we submit this for review it WILL FAIL and there's nothing we can do about it.

Help me help you! I need to know how I can debug the CollectionView behaviours on my macbook.

angelru commented 1 year ago

@petermauger It is clear that we cannot use CollectionViewin production.

I have problems too: https://github.com/dotnet/maui/issues/12130

Try using ListViewor Sharpnado.CollectionView

petermauger commented 1 year ago

@angelru I'm only using CollectionView on iOS BECAUSE ListView has similar, unacceptable failures

https://github.com/dotnet/maui/issues/11598

I'll look at the Sharpnado.CollectionView and pray...

petermauger commented 1 year ago

@angelru I was porting a Xamarin.Forms app which used ListView. Everything was basically working but cells would just not appear from time to time on iOS. The app I'm working on provides formal health advice to medical professionals that they need to rely on so 'whoops just left out some information' is completely unacceptable. Switched to CollectionView and everything worked on iOS (I wasn't testing on iPhone 14 Pro :( ) but Android ran into basically the same problem (where it had worked fine with ListView). If you're only building for Android then switch to ListView and you should be ok. If, like me, you need to deploy to iOS devices via the Apple App Store then you're sh*t out of luck because there isn't a built-in vertical scrolling option available at all. Of course everything just gets thrown on the Backlog...

angelru commented 1 year ago

@petermauger Another possible but very dirty solution (I haven't tried it) is to create a net maui blazor component and use it in the .net maui app.

https://www.meziantou.net/infinite-scrolling-in-blazor.htm

My app is also for iOS.

petermauger commented 1 year ago

Sharpnado CollectionView is 'the goods' for iOS @angelru. Unfortunately Android misbehaves in similar ways to the MAUI CollectionView so I've implemented Android with MAUI ListView (which I've gotten to the point of being stable).

I built my own ContentListView ContentView subclass with this xaml:

<ContentView>
        <OnPlatform x:TypeArguments="View">
            <OnPlatform.Platforms>
                <On Platform="iOS">
                    <sharpnado:CollectionView x:Name="iOSList"
                        CollectionPadding="0"
                        EnableDragAndDrop="False"
                        ItemTemplate="{StaticResource iOSTemplateSelector}"
                        CollectionLayout="Vertical"/>
                </On>
                <On Platform="Android">
                    <ListView x:Name="androidList" 
                          SelectionMode="None" HasUnevenRows="True" SeparatorVisibility="None"
                          ItemTemplate="{StaticResource androidTemplateSelector}"
                          HorizontalOptions="Center">
                    </ListView>
                </On>
            </OnPlatform.Platforms>
        </OnPlatform>
    </ContentView>

My iOSTemplateSelector is implemented using Sharpnado SizedDataTemplateSelector which allows you to provide template selection and ALSO provide a height for the cell based on item data (only way I could figure out to get variable height cells using Sharpnado)

angelru commented 1 year ago

Sharpnado CollectionView es 'lo bueno' para iOS@angelru. Desafortunadamente, Android se comporta mal de manera similar a MAUI CollectionView, por lo que implementé Android con MAUI ListView (que llegué al punto de ser estable).

Creé mi propia subclase ContentListView ContentView con este xaml:

<ContentView>
        <OnPlatform x:TypeArguments="View">
            <OnPlatform.Platforms>
                <On Platform="iOS">
                    <sharpnado:CollectionView x:Name="iOSList"
                        CollectionPadding="0"
                        EnableDragAndDrop="False"
                        ItemTemplate="{StaticResource iOSTemplateSelector}"
                        CollectionLayout="Vertical"/>
                </On>
                <On Platform="Android">
                    <ListView x:Name="androidList" 
                          SelectionMode="None" HasUnevenRows="True" SeparatorVisibility="None"
                          ItemTemplate="{StaticResource androidTemplateSelector}"
                          HorizontalOptions="Center">
                    </ListView>
                </On>
            </OnPlatform.Platforms>
        </OnPlatform>
    </ContentView>

Mi iOSTemplateSelector se implementa usando Sharpnado SizedDataTemplateSelector, que le permite proporcionar una selección de plantilla y TAMBIÉN proporcionar una altura para la celda en función de los datos del elemento (la única forma en que podría averiguar cómo obtener celdas de altura variable usando Sharpnado)

Thank you! I will do the same.

I found this, but I haven't been able to test it: https://github.com/Redth/Maui.VirtualListView

It looks promising, although I'm not familiar with the concept of "adapter" and it has almost no options. I don't know if the .NET MAUI team will optimize and fix what is present in the CollectionView or give priority to the VirtualListView control (although it doesn't seem like)

needledrag commented 1 year ago

Any update on this, Im getting terrible loading times with on CollectionViews with only ~50 items in, it seem the garbage collector is going nuts on each addition...

hartez commented 1 year ago

Any update on this, Im getting terrible loading times with on CollectionViews with only ~50 items in, it seem the garbage collector is going nuts on each addition...

This particular issue has nothing to do with load times or garbage collection; it's an issue with the UICollectionViewLayout not invalidating when cell sizes change. If you're having load time and GC issues, I'd suggest opening a separate issue.

hartez commented 1 year ago

This is a duplicate of #3643.