[Bug] CarouselView/CollectionView (iOS Only) Shows Extra White Space On Top & Left When Shouldn't Be

[SharpMobileCode]

Description

I'm applying a CarouselView inside of a GridLayout and the ItemTemplate (currently a stack layout) should go edge to edge to the left, top, and right edges of the screen. There should be no padding, insets, or margins. However, it seems that on iOS only, the left and top edges contains some white space, approximately 2 pixels (see screenshots). When you scroll through, the white spaces remain, but there shouldn't be any. Android does not have this issue and renders as expected.

Steps to Reproduce

1. Open the attached solution.
2. Run the Android application.
3. Scroll and see how all items render edge to edge correctly.
4. Run the iOS application.
5. Scroll and see how there's white spaces on the left and top edges when there shouldn't be.

Expected Behavior

iOS should render like Android (see screenshot)

Actual Behavior

iOS contains white space on the top and left edges (see screenshot)

Basic Information

• Version with issue: 4.4.0.991265
• Last known good version: Unknown
• IDE: Visual Studio for Mac 2019 8.3.11 (Build 1)
• Platform Target Frameworks:
  • iOS: 13.6.0.12
• Nuget Packages: Xamarin Essentials
• Affected Devices: All iOS Devices

Screenshots

(See Above)

Reproduction Link

CarouselViewBugForiOS.zip

[rmarinho]

Confirmed also with 4.5.5.74 nightly

[rmarinho]

So this seems some issue with layout and CollectionView not specific to CarouselView.

Well try to figure it out but here's my workaround right now. Wrap it on a Frame.

<Frame BackgroundColor="{Binding BackgroundColor}" CornerRadius="0" HasShadow="False">
         <StackLayout>
                <Label 
                        HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                        HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
                        Text="{Binding Name}" />
         </StackLayout>
</Frame>

[FrederikKoers]

It's actually adding one pixel on top and left, and right and bottom one pixel get out of the frame

[CoolRets]

When will it be repaired?

[tamasszadvari]

Are there any plans to fix this issue? It's really annoying and ridiculous that a framework mature like Xamarin.Forms has bugs like this. The CollectionView is one of the most basic UI components of the most apps.

[rudyspano]

@tamasszadvari , as a workaround, you can apply a platform effect to fix the issue:

public class FixiOSCollectionViewCellShiftPlatformEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            if (Element != null)
            {
                Element.PropertyChanged += Element_PropertyChanged;
            }
        }

        private void Element_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (Container.Bounds.X == -1)
            {
                Container.Bounds = new CoreGraphics.CGRect(0, 0, Container.Bounds.Width, Container.Bounds.Height);
            }
        }

        protected override void OnDetached()
        {
            if (Element != null)
            {
                Element.PropertyChanged -= Element_PropertyChanged;
            }
        }
    }

[tyler-reed]

Can confirm we also had this issue with a CarouselView inside of a CollectionViewHeader. We ended up working around this by applying a negative margin to the CollectionView and the CarouselView. That seemed to fix the issue on iOS without messing up the layout on Android.

[rmarinho]

@tyler-reed do you have a small code repo?