Bug 28628 - Reuse of cell containing an Image that are async loaded will display the previous image.
Summary: Reuse of cell containing an Image that are async loaded will display the prev...
Status: VERIFIED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms (show other bugs)
Version: 1.4.1
Hardware: PC Mac OS
: Normal minor
Target Milestone: ---
Assignee: Rui Marinho
URL:
Depends on:
Blocks:
 
Reported: 2015-04-01 09:19 UTC by Johan Karlsson
Modified: 2018-01-02 15:38 UTC (History)
14 users (show)

Tags: ios visual virtualization ac
Is this bug a regression?: ---
Last known good build:


Attachments
Reproduction project (174.24 KB, application/zip)
2015-04-01 09:19 UTC, Johan Karlsson
Details
Updated sample project (175.51 KB, application/zip)
2015-04-02 00:40 UTC, Johan Karlsson
Details


Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
VERIFIED FIXED

Description Johan Karlsson 2015-04-01 09:19:53 UTC
Created attachment 10585 [details]
Reproduction project

When using a ListView in iOS to display a list of images that are loaded using an url, the cells are reused, displaying the previous images for a short while. This is very annoying for the user experience.

Unsure of the impact on Android at the moment.

The sample project displays this issue.

Repro

1. Open the sample project and run it on iOS
2. Scroll down the list
3. Images should be displayed with a constant incrementing height (400, 401, 402)
4. When cells starts to get reused, you start to see lower numbers for a while before the image is fully loaded and the correct one is displayed. (BUG or at least an annoying issue)

IMPORTANT

Once the images are loaded (and cached) the scroll works fine. Simply because there is no delay to set the image that is loaded from the cache instead of the network. You need to restart the app to experience the issue again. 

Proposed solution(s)

1) Directly when the image source changes for the ImageRenderer on iOS, the underlaying UIIMage.Image should be set to null or perhaps to a placeholder image that one can specify.

2) Give the user a chance to react to reuse of cells to determine what to reset and what to leave.

More info

The reuse of cells are triggered exactly when the cell is about to display, so there is no way to preload the images.
Comment 1 Johan Karlsson 2015-04-01 15:11:30 UTC
Additional info: The images seems to be cached even between apps restarts so you need to reset the device in-between runs or randomize the images better.
Comment 2 Johan Karlsson 2015-04-02 00:40:37 UTC
Created attachment 10596 [details]
Updated sample project

Updated the reproduction project with the following things

* Image URL are now unique each time you run the app to remove the caching effect between runs. (We still want the caching each run to display that function)
* Added a simple workaround (uncomment the content of ImageListView.iOS/Renderers/ImageRenderer.cs). Images are now cleared before displayed. Still looks choppy, but a nicer implementation can be fixed in the actual renderer pretty easy.
Comment 3 Abhishek 2015-04-03 10:13:54 UTC
I have tried this issue and able to reproduce the reported behavior at my end.

Steps to Reproduce:
1. Download the above sample project.
2. Run the application on Device/Simulator.
3. It will take time to reload the image after scrolling down the list and Images will displayed with a constant incrementing height (400, 401,402 and so on.)
4. As you move further, it will show previous Image.
5.If I uncommented the content of ImageListView.iOS/Renderers/ImageRenderer.cs .Now images are cleared.

Screencast:http://www.screencast.com/t/F6PbwiNQ6m4
IOS Device Log:https://gist.github.com/Abhishekk360/2995127480184d096f42
Ide Log:https://gist.github.com/Abhishekk360/db988f92b934778bd99f

Environment Info:

Xamarin.Forms : 1.4.2.6353-pre2.
Xamarin.Forms : 1.4.1.6349
=== Xamarin Studio ===

Version 5.8.2 (build 7)
Installation UUID: 93e693b0-b53d-40f4-b29c-b61ff5cbe892
Runtime:
	Mono 3.12.1 ((detached/0849ec7)
	GTK+ 2.24.23 (Raleigh theme)

	Package version: 312010003

=== Apple Developer Tools ===

Xcode 6.2 (6776)
Build 6C131e

=== Xamarin.iOS ===

Version: 8.8.2.5 (Business Edition)
Hash: 1722273
Branch: 
Build date: 2015-04-01 13:07:55-0400

=== Xamarin.Android ===

Version: 4.20.1.0 (Business Edition)
Android SDK: /Users/xamarin23/Desktop/android-sdk-macosx
	Supported Android versions:
		2.1    (API level 7)
		2.2    (API level 8)
		2.3    (API level 10)
		3.1    (API level 12)
		4.0    (API level 14)
		4.0.3  (API level 15)
		4.1    (API level 16)
		4.2    (API level 17)
		4.3    (API level 18)
		4.4    (API level 19)
		4.4.87 (API level 20)
		5.0    (API level 21)
Java SDK: /usr
java version "1.7.0_71"
Java(TM) SE Runtime Environment (build 1.7.0_71-b14)
Java HotSpot(TM) 64-Bit Server VM (build 24.71-b01, mixed mode)

=== Xamarin Android Player ===

Version: Unknown version
Location: /Applications/Xamarin Android Player.app

=== Xamarin.Mac ===

Version: 2.0.0.190 (Business Edition)

=== Build Information ===

Release ID: 508020007
Git revision: 067ed06873402cf780f8a0899bb332c2a1c0af22
Build date: 2015-03-27 14:17:13-04
Xamarin addins: 02510c4990dee3475c282b3182d588975a63ff07

=== Operating System ===

Mac OS X 10.10.0
Darwin 800BC.local 14.0.0 Darwin Kernel Version 14.0.0
    Fri Sep 19 00:26:44 PDT 2014
    root:xnu-2782.1.97~2/RELEASE_X86_64 x86_64
Comment 4 Jason Smith [MSFT] 2015-05-21 21:39:01 UTC
The time re-use of cells is triggered is based on when the platform decides to do it. You can make the image transparent while its loading as a workaround for now.
Comment 5 Johan Karlsson 2015-05-22 01:58:30 UTC
It's not the reuse of the cell that is the issue. The issue is that the way Forms is written you don't get a chance to initialize components/controls within a newly reused cell before they are redisplayed again without the use of a custom renderer. This leads to weird behaviors that could easily be avoided if, for example images, are reset or that you expose a OnCellUsed event/override on the ListView itself to allow for custom reinitialization.

The easiest way would be to just clear the UIImageView within the Forms Image control before the await call that downloads the image. No image is better than the wrong image.
Comment 6 Johan Karlsson 2015-05-22 02:04:01 UTC
One other approach is to de-mystify the closed hash salting you do on the cache so that preloading of the cache is easier. This way preloading of images would solve the problem.
Comment 7 Richard Edwards 2016-02-11 14:11:56 UTC
Has this been fixed or is there a work around for this. I have an enterprise app ready to ship and this is the remaining bug I need to get around. It seems to only happen on iOS, Android works fine.
Comment 8 Jason Smith [MSFT] 2016-03-16 09:32:17 UTC
Should be fixed in 2.2.0-pre1
Comment 9 Parmendra Kumar 2016-04-05 18:45:47 UTC
I have checked this issue with xamarin.forms 2.2.0-pre1 and still getting same issue on iOS.

Screencast: http://www.screencast.com/t/vt0IQRZRemcI

Environment Info: https://gist.github.com/Parmendrak/f0b96b5f6d4126726a32b510ff27fc73

Hence reopen this issue.
Comment 10 Jason Smith [MSFT] 2016-04-06 02:52:02 UTC
huh, I believe the video but WTF I cant see how to do it locally
Comment 12 Rajneesh Kumar 2016-04-21 10:53:39 UTC
I have again check this issue and observed that its working fine , hence I am closing this issue.

Also if anyone face this issue again so feel free to reopen it OR file a seperate issue for the same.

Thanks..!
Comment 13 joe 2016-04-22 06:44:30 UTC
@Rajneesh Kumar - this is still happening in 2.2.0-pre4 on device and simulator
Comment 14 Joel 2018-01-02 15:38:01 UTC
@Johan Karlsson - were you able to implement a workaround? I believe I am facing the same issue (even with Xamarin.Forms 2.4 - not sure it was ever really fixed).

Can you give a code example of what you mean when you say "The easiest way would be to just clear the UIImageView within the Forms Image control before the await call that downloads the image"?