A Workaround for GIF issues in .NET MAUI

I have been having issues getting a GIF to animate consistently in iOS and Android using the Image control in MAUI. There are open issues on this, but in the meantime, hopefully this solution will meet your needs. On Windows, GIF images in an Image control work as expected.

I tried several workarounds many of which were inspired by this Stack Overflow post: GIF image is not working in .net MAUI application – Stack Overflow

These included turning animation off, waiting a few hundred milliseconds, and turning it on again. I couldn’t consistently get this to work on Android, sometimes it would work and sometimes not. On iOS I couldn’t get the GIF to animate at all.

I finally settled on using a WebView to host the GIF (thanks to Isidoros Moulas for the inspiration). It took a while to get it right, calculating the scaling properly based on the Aspect property, and I had a really hard time figuring out how to make the WebView on iOS transparent, so that it can handle transparent GIFs. I finally got this working, and I have put the results on GitHub here: billreiss/MauiGifWebView: Workaround for GIF not animating issue in MAUI on iOS and Android (github.com)

NOTE: I don’t know how this workaround will hold up with a ton of GifImage controls, since each one is hosting a WebView. If you see performance issues, I’m sure there are some improvements that can be made to improve performance, so feel free to contribute either through raising issues or PRs on the GitHub repo. I think the inherent overhead of the WebView might cause issues if you are using a lot of these.

There is a MAUI class library in that solution that you can easily reference in your own projects, specifically a custom GifImage control that I created as close to a drop-in replacement for the Image control as possible. On Windows, the GifImage control uses the Image control, since it works as expected. On all other platforms it uses the WebView. As the other platforms get fixed, I’ll update the sample to use the Image control instead of the WebView, should be a one-line change of code.

Important note: for your GIFs that you want to use with the custom GifImage control, the GIF image files need a build action of MauiAsset, and not MauiImage. This makes them available to the WebView. I’m sure there are cases that I haven’t handled for sizing etc. but as I said above please feel free to raise issues or PRs on the GitHub repository.

Hope this helps!