Bug 40923 - Animated GIF within WebView only animates a single time after navigations
Summary: Animated GIF within WebView only animates a single time after navigations
Status: RESOLVED ANSWERED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: unspecified
Hardware: PC Mac OS
: --- normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2016-05-05 22:51 UTC by Cody Beyer (MSFT)
Modified: 2016-07-08 16:33 UTC (History)
2 users (show)

Tags:
Is this bug a regression?: ---
Last known good build:

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:
RESOLVED ANSWERED

Description Cody Beyer (MSFT) 2016-05-05 22:51:16 UTC
# Description

The following sample app demonstrates an issue where an animated GIF within a web view will only animate during its first access, subsequent attempts to display the view will not have the GIF animate

# Sample

https://www.odrive.com/s/40fe1fbd-86fa-4ba2-b453-484ff34a7607-572bcc92

# Steps to Reproduce

1. Download sample
2. Deploy to iOS
3. Tap “Click to Switch View”
4. Tap “Back”
5. Tap “Click to Switch View”

# Expected Results

GIF should animate at both steps 3 and 5

# Actual Results

Only step 5 is animated

# Versions

=== Xamarin Studio Business ===

Version 6.0 (build 5104)
Installation UUID: e2575a9c-f828-457f-ba3e-cee773ef7010
Runtime:
	Mono 4.4.0 (mono-4.4.0-branch/81f38a9) (64-bit)
	GTK+ 2.24.23 (Raleigh theme)

	Package version: 404000142

=== Xamarin.Profiler ===

Not Installed

=== Apple Developer Tools ===

Xcode 7.3.1 (10188.1)
Build 7D1014

=== Xamarin.iOS ===

Version: 9.8.0.294 (Xamarin Business)
Hash: 6950f7b
Branch: cycle7
Build date: 2016-04-24 15:35:14-0400

=== Xamarin.Android ===

Version: 6.1.0.48 (Xamarin Business)
Android SDK: /Users/codybeyer/Library/Developer/Xamarin/android-sdk-macosx
	Supported Android versions:
		4.0.3 (API level 15)
		4.4   (API level 19)
		6.0   (API level 23)

SDK Tools Version: 25.1.3
SDK Platform Tools Version: 23.1
SDK Build Tools Version: 23.0.1

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)

Android Designer EPL code available here:
https://github.com/xamarin/AndroidDesigner.EPL

=== Xamarin Android Player ===

Version: 0.6.5
Location: /Applications/Xamarin Android Player.app

=== Xamarin.Mac ===

Version: 2.8.0.294 (Xamarin Business)

=== Xamarin Inspector ===

Version: 0.8.0.0
Hash: dc081aa
Branch: master
Build date: Tue Apr 26 23:07:44 UTC 2016

=== Build Information ===

Release ID: 600005104
Git revision: 1345d355d4f1b9677d91e1290a6034e2047bdf36
Build date: 2016-04-26 12:21:45-04
Xamarin addins: 7d85147c75b6dbb4b351906636ef76fdf60307c2
Build lane: monodevelop-lion-cycle7

=== Operating System ===

Mac OS X 10.11.4
Darwin Codys-Mac.router 15.4.0 Darwin Kernel Version 15.4.0
	Fri Feb 26 22:08:05 PST 2016
	root:xnu-3248.40.184~3/RELEASE_X86_64 x86_64

=== Enabled user installed addins ===

Xamarin Inspector 0.8.0.0
Comment 1 E.Z. Hart [MSFT] 2016-07-08 16:33:28 UTC
You're running into the native WebView and UIWebView caching. The image you're loading is being cached; because the WebViews don't reload it, the gif animation does not restart.

You could probably create custom renderers for each platform to control the caching to address this problem. But the quick-and-dirty option is simply to add a random parameter to your image `src` so that the cached version of the image is never invoked. 

In your TransitionPage class: 

    private static int _cacheBuster = 0;

The, when setting the HTML for your HtmlWebViewSource:
    
    htmlSource.Html = $@"<html><body bgcolor=""#000000"">                                
        <div style=""width:100%;height:100%;display:table;"">                          
        <p style=""text-align:center;vertical-align:middle;display:table-cell;""><img src=""Transition.gif?{_cacheBuster++}""></p></div></body></html>";

This will make the gif URL used by the WebView different each time, which prevents the cached version from being used.