[Bug] Animated GIF files do not play on iOS/macOS

[mattleibow]

Description

The iOS platform does not yet have the logic to load animated images correctly. Right now it only gets the first frame.

Steps to Reproduce

1. Add an image element
2. Set the source to an animated gif
3. Observe the image load, but not play

Expected Behavior

Animation plays.

Actual Behavior

Only the first frame shows.

Workaround

https://github.com/dotnet/maui/issues/866#issuecomment-1466988089

[shimingsg]

verified with VS 17.2.0 Preview 2.0 [32224.339.main] in Android 12, windows and IOS 15.2: the image only gets the first frame. repro demo: 866.zip

[angelru]

This is still unresolved in RC3?

[mattleibow]

Let me have a look at this... It should be working on android at least because we don't do anything and hand it off to glide.

[angelru]

In windows I have noticed that it does not work either

[mattleibow]

Looking at this now. I got ideas as to where....

The first issue is that we convert gif to png :)

Try adding this:

<MauiImage Update="Resources\Images\*.gif" Resize="False" />

or whatever the path to the gif is. Basically set Resize=false to get it to work. I am seeing windows play gif here when I do that.

[angelru]

Looking at this now. I got ideas as to where....

The first issue is that we convert gif to png :)

Try adding this:

<MauiImage Update="Resources\Images\*.gif" Resize="False" />

or whatever the path to the gif is. Basically set Resize=false to get it to work. I am seeing windows play gif here when I do that.

Now if it works, thanks, is it the correct way to do it or do we have to wait for another RC/GA to solve this problem?

[mattleibow]

This is the correct way, but I will also make this the default so you don't have to do it. There are a few properties on MauiImage that can control how it is resized and if at all.

[angelru]

This is the correct way, but I will also make this the default so you don't have to do it. There are a few properties on MauiImage that can control how it is resized and if at all.

on macOS desktop it doesn't work either

[MuneeshKumarG]

I have checked gif image in .Net Maui RC3. With below work around, gif working fine with WinUI.

But still issue reproducing in Android.

[mattleibow]

@MuneeshKumarG Is this your issue? https://github.com/dotnet/maui/issues/7019 If not, please open a new issue related to your specific issue on Android.

[rynjas]

@mattleibow

As you can see in the sample below, I tried the workaround, but the gif doesn't work in iOS/macOS and Android. https://github.com/rynjas/GifMauiSample

[rynjas]

@mattleibow When connected to hotreload on the Android platform, the animation does not work. If you set IsAnimationPlaying to false and then back to true, while in hot reload mode, it should work.

Besides the hot reload issue, Android is working fine, but iOS and macOS are still not working

[iamdiosilva]

Where i add this ? <MauiImage Update="Resources\Images\*.gif" Resize="False" />

[NonameMissingNo]

Where i add this ? <MauiImage Update="Resources\Images\*.gif" Resize="False" />

In the app.xaml where the splashscreen, and similars are

[iamdiosilva]

doesnt work to me

[rynjas]

@Dio-rep Could you please check this sample code and my comments above? https://github.com/rynjas/GifMauiSample

[angelru]

any news about this?

[legrignotin]

Any news about this? Or at least a workaround? Definitely a must have for my application

I am downloading the gifs as imagesource from my server so I cannot use the "resize trick"

[Vpatel541]

The resize trick doesnt seem to work for me

[Muhammadfaizann]

The resize trick doesn't seem to work for me either

[Muhammadfaizann]

does not play on android aswell

[akycdi]

Is there any alternative way to render a gif now? in maui Mac and iOS

[T-T-P]

Is this going to be resolved in .NET 7 MAUI or is this issue now only part of the .NET 8 timeline?

[liveinvarun]

@jamesmontemagno created a control long back for the Xamarin IOS for supporting GIF's. If you use that code it will work in MAUI in net7. Request you to try that => https://gist.github.com/jamesmontemagno/7619563.

[pcdus]

https://gist.github.com/jamesmontemagno/7619563

Is it possible to use this in a Handler?

[ghost]

Hi @mattleibow. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[jinxinjuan]

Verified this issue with Visual Studio Enterprise 17.6.0 Preview 2.0. Repro on iOS 16.2 with mentioned project https://github.com/rynjas/GifMauiSample

[fariz-huseynov]

I also encounter the same issue :(

[cat0363]

I got around this issue by the following method.

GIFImage.cs

public class GIFImage : Image
{
}

MauiProgram.cs

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
        builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        })
        .ConfigureMauiHandlers(handlers =>
        {
#if IOS
            handlers.AddCompatibilityRenderer(typeof(GIFImage), typeof(Microsoft.Maui.Controls.Compatibility.Platform.iOS.ImageRenderer));
#endif
        });

    return builder.Build();
}

How to use is as follows.

<local:GIFImage Source="xxxxx.gif" IsAnimationPlaying="True" />

Using the Xamarin.Forms renderer is a workaround, but not a solution. Until this issue is resolved, I will work around using the method above. I hope the underlying problem is resolved.

[xufeitt]

Where is the Platform.iOS.ImageRenderer code ?