Xamarin.forms: [Bug] Images disappear on collectionview scroll Xamarin Forms with FFImageLoading

[SagarPanwala]

Description

• I implemeneted experimental collectionview with Xamarin Forms 4.0, images are loading when app launched but after we scroll images are getting disappeared.
  I'm not sure this is the issue of CollectionView or FFImageLoading , so posting in both github Repo.
  To Track : https://github.com/luberda-molinet/FFImageLoading/issues/1286

Steps to Reproduce

1. 
   
   • On scroll of collectionview(Xamarin forms 4.0) images getting disappeared in iOS, Android works fine.
   
   

Expected Behavior

• Images should not get disappeared.

Actual Behavior

• On scroll of collectionview(Xamarin forms 4.0) images getting disappeared in iOS, Android works fine.

Basic Information

• Version with issue: Xamarin Forms 4.0.0.425677
• Last known good version: never tried with collectionview before
• IDE: VS for MAC
• Platform Target Frameworks:
  
  
  
  • iOS: 12.1
  
  
• Affected Devices: ALL iOS

Reproduction Link

           <CollectionView
                ItemsLayout="{x:Static ListItemsLayout.HorizontalList}"
                ItemSizingStrategy="MeasureFirstItem"
                ItemsSource="{Binding FavouriteRecipes}"
                HeightRequest="220"> 
            <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid
                            Padding="5,2"
                            WidthRequest="140">
                            <Frame
                                HasShadow="true"
                                Padding="0"
                                Margin="0"
                                IsClippedToBounds="true"
                                CornerRadius="2"
                                BackgroundColor="White">
                                <Grid
                                    Margin="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition
                                            Height="150" />
                                        <RowDefinition
                                            Height="*" />
                                    </Grid.RowDefinitions>

                                        <ffimageloading:CachedImage
                                            Grid.Row="0"
                                            HeightRequest="150"
                                            LoadingPlaceholder="placeholder_square.png"
                                            ErrorPlaceholder="placeholder_square.png"
                                            Aspect="AspectFill"
                                            Source="{Binding Image}" />
                                    <StackLayout
                                        Grid.Row="1"
                                        Orientation="Vertical"
                                        Padding="5,0">
                                        <Label
                                            Font="14"
                                            Text="{Binding Title}"/>
                                        <StackLayout
                                            Orientation="Horizontal"
                                            HeightRequest="30">
                                            <Image
                                                Source="ic_clock_black.png"
                                                Aspect="AspectFill"
                                                WidthRequest="20"
                                                HeightRequest="20"
                                                VerticalOptions="Center"
                                                HorizontalOptions="Start" />
                                            <Label
                                                Font="13"
                                                Text="{Binding Time}"
                                                VerticalTextAlignment="Center" />
                                        </StackLayout>
                                    </StackLayout>
                                      </Grid>
                            </Frame>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

Here is the link of video
https://www.dropbox.com/s/wpgxkl6prtmn0iu/collectionview%20ffimageloading%20issue.mov?dl=0

[samhouts]

@SagarPanwala Can you please attach a small project that demonstrates this issue? Thanks!

[dragonale]

the images also disappear with XF 3.6
@samhouts https://www.dropbox.com/s/5fd7rdsveyfn9xk/ImageDisappears.rar?dl=0
but see android..
--> hamburger menu --> About

[samhouts]

@dragonale Thanks for the repro. I think you're experiencing a different issue, since that is a ListView and not a CollectionView. You want to set CachingStrategy="RecycleElement" on your ListView to workaround the problem.

@SagarPanwala Can you please attach a small project that demonstrates this issue? Thanks!

[dragonale]

@dragonale Thanks for the repro. I think you're experiencing a different issue, since that is a ListView and not a CollectionView. You want to set CachingStrategy="RecycleElement" on your ListView to workaround the problem.

@SagarPanwala Can you please attach a small project that demonstrates this issue? Thanks!

the problem persist if the images are not the same, put the images at random position scroll up and down. This is not a workaround
This is the the link with collectionview is the same problem https://www.dropbox.com/s/oqbxtwpstjsjsjc/ImageDisappearsCollection.rar?dl=0

[hartez]

Repro project:

_6341 Repro.zip

Still happening with 4.1.0.581479.

[jfversluis]

7028 is not a fix for this. This also happens with regular images, not just FFImageLoading

[GiuseppePennisi]

Is there any news about this problem? I found a possibile workaround suggested by an user on Stackoverflow:
`Stream stream = Android.App.Application.Context.ContentResolver.OpenInputStream(PhotoUri);
byte[] imageBytes = ReadFully(stream);
contact.Photo = Xamarin.Forms.ImageSource.FromStream(() => new MemoryStream(imageBytes));

public static byte[] ReadFully(Stream input)
{
byte[] buffer = new byte[16 * 1024];
using (MemoryStream ms = new MemoryStream())
{
int read;
while ((read = input.Read(buffer, 0, buffer.Length)) > 0)
{
ms.Write(buffer, 0, read);
}
return ms.ToArray();
}
}`
and this works with "normal" images, but I have to work with gifs, so i don't know how to resolve this problem.

[adrianknight89]

Images disappear for me on Android too. Also, the aspect ratios of existing images are not accurate if I scroll up and down.

[libin85]

Is there any update? I have the same issue with the XF 4.3.0.991211

[xamiell]

Hi, 2020, the same bug on iOS and Android.
When I add an Item this item is added to the ListView but not rendered or showed and if I scroll Images start disappearing.

[xamiell]

I record this to show what happen: Video
This happens with a ListView even without using FFImageLoading.

[hartez]

Not sure exactly when, but this has been fixed for CollectionView. As of version 4.5.0.617, this bug no longer happens.

To be clear: This is fixed for CollectionView. If you're experiencing this bug with ListView, which is a different control, please open an issue for ListView.