[Bug][iOS] CollectionView doesn't fill page

[rickclephas]

Description

A CollectionView inside a StackLayout inside a TabbedPage that is set as the MainPage after the app is started doesn't fill the whole page.

Steps to Reproduce

1. Run the sample on an iPhone
2. Click the "Go to tabbed page!" button

Expected Behavior

The CollectionView fills the page.

Actual Behavior

The CollectionView doesn't fill the page.

Basic Information

• Version with issue: 5.0.0.2012
• Last known good version: n/a
• Affected Devices: iPhone 7 and iPhone 12 Pro Max (and presumably all other iPhones).

Note: this only affects physical devices, simulators aren't affected.

Screenshots

Reproduction Link

XFiOSBlankSpaceIssue.zip

Workarounds

The sample contains TODOs mentioning the different parts of the code that cause this issue.
Changing either of the following will "fix" the issue.

Setting the MainPage to the TabbedPage

//TODO: Set MainPage to MyTabbedPage and the issue is gone
//MainPage = new MyTabbedPage();
MainPage = new MainPage();

Removing the enclosing StackLayout

<!--TODO: Remove the enclosing StackLayout and the issue is gone-->
<StackLayout>
...
</StackLayout>

Setting the VerticalOptions to FillAndExpand

<!--TODO: Set VerticalOptions to FillAndExpand and the issue is gone-->
<!--<CollectionView.VerticalOptions>FillAndExpand</CollectionView.VerticalOptions>-->

[jsuarezruiz]

Using the TabbedPage as MainPage and wrapping the CollectionView with the StackLayout, I see:

Seems to be correct, I am missing something?

[rickclephas]

@jsuarezruiz I wasn't able to reproduce this on a simulator either. Though I was able to reproduce this on a real iPhone 7 and 12 Pro Max.
Didn't test on any other devices but I assume all iPhones (and maybe iPads?) are affected.

[chrome050]

Same as #6908

[chrome050]

The workaround is to set the HeightRequest=3000 for the CollectionView and don't forget to set VerticalOptions="FillAndExpand"

[developer9969]

This only happens on the real phone and this something that should get fixed. My workaround is to have a grid instead of a StackLayout with Row="*"
They really need to sort the collection view out!

[rickclephas]

@chrome050 I am not sure if this is exactly the same issue (although definitely related!).
In our case there are 3 parts of the code that combined caused the issue. Removing/changing one of these "fixes" the issue.
I also wasn't able to reproduce this on a simulator but only on real iPhones.

In our case we fixed it with the VerticalOptions="FillAndExpand", the HeightRequest wasn't needed.

Anyway there is definitely something very wrong with how these elements behave...

[memis1970]

Seems to be when the phone is laid flat on a table for me as mentioned in #6908

[jfversluis]

Might be a longshot here, but would you be able to test the NuGet package from #15067 as described here and let us know if this fixes this issue?

Note that you need the specific version from that PR which in this case is 5.0.0.7996.

Thanks!

[rickclephas]

@jfversluis unfortunately 5.0.0.7996 has the same issue.

Previously I wasn't able to reproduce this with a simulator but only on physical devices.
However even on physical devices this bug isn't always occurring.
It turns out that this issue is caused by the orientation of the device (like @memis1970 mentioned).

This is also the difference between a physical device and the simulator that by default prevents the issue from occurring on a simulator. Changing the orientation of the simulator to "Face Up" makes this issue reproducible on a simulator as well.

See the following video that demonstrates the issue with:

• The reproduction code in XFiOSBlankSpaceIssue.zip
• Xamarin Forms 5.0.0.7996
• iOS 15.2 iPhone 12 Pro Max Simulator

XFiOSBlankSpaceIssue.mp4

[jfversluis]

Thank you for checking and the additional info! It's interesting that something seems to happen with the orientation even when you just start the app. I know we did a fix for the orientation in the upcoming service release: https://github.com/xamarin/Xamarin.Forms/releases/tag/release-5.0.0-sr9

It's not on NuGet yet, but the binaries are on that link. If it's not too much trouble, maybe you could check that one as well? I'm not 100% confident that this change is also in the 7996 version.

[rickclephas]

I am seeing the same result with the 5.0.0.2337 NuGet package from that release.

[rickclephas]

@jfversluis @jsuarezruiz it seems that when the orientation is "Face Up" the measurement logic interprets that as "Landscape". If you look at the screenshot and video above you'll notice that the blue area is actually a perfect square.

[jfversluis]

Yeah that definitely seems like a good point. Not sure if we actually do that much ourselves with the orientation though, but this is a good lead.

[brendonupson]

I'm having similar issue with an app. In my testing, launching the app when the phone is flat on a table produces the blank area. Kill the app and relaunch it in vertical / portrait mode, no blank area. Explains why always seemed ok in the sim. @rickclephas seems to have nailed the issue. This is in v5.0.0.2337

[rickclephas]

Can confirm that as mentioned in #6908 (comment) this has been fixed in 5.0.0.2401 by #13163.
Looking at the history this issue was likely caused by #5975.

[jfversluis]

Thanks for the confirmation @rickclephas !