I want to embed a gif image into my app. The gif animation works on a browser. However, it does not play when I pushed it onto my iPhone. Is this the default behavior?
ion-slide
div.card.list
div(class="item" )
img(src="images/tutorial/toggleswitch.gif" style="width:100%" )
What is this syntax you’re using?
I put it inside a slide box
ion-view(title='Tutorial')
ion-nav-buttons(side="right" )
span.button.button-clear(ui-sref="home" ng-show="show_button.skip_tutorial").
Skip tutorial <i class="icon ion-ios7-arrow-forward"/>
ion-content.has-header
div(cg-busy="{promise:busy,message:'load'}" )
ion-slide-box(on-slide-changed="update_header($index)")
ion-slide
div.card.list
div(class="item" )
img(src="images/tutorial/toggleswitch.gif" style="width:100%" )
Thanks for responding =) I am unclear what is causing this response
No I mean, what sort of syntax are you using? This isn’t standard HTML. I don’t recognise it.
Ahh jade 
Hmm, it seems to work for me
Yup. Its jade. I could get it to work on a browser and even an android app. However, no luck in making it happening on iOS.
Hmm, how are the paths setup? Is it relative to the idex.html page?
The path should be correct. I had the image displayed on the iPhone correctly. The only problem is that it doesn’t play unlike the build I have for android or browser
Hmm, I just tried this on my iphone and it my gif is playing fine.
Can you do some remote debugging with safari to see if any errors are coming up?
I apologize for getting back late. I tried it on a new div and it works there. The curious part is it doesn’t work on a slide box.
Nor worries.
Hmm, I just tried a slide-box example and it works for me…
Are the images local of being pulled from a server?
Your syntax is relative. Put a slash at the beginning of the URL to target the root of your iOS apps file system.
If in future, use safari to debug the iPhone webview to see if the image request was successful or not.
@AshConnell I am using safari for debugging and its is pulling my image successfully. No issues with the path file.
@mhartington The image is local. You got me curious when you say that it worked in slidebox. So i went out to experiment and turn out it does works if you put it in the first slide (My app requires it to be on the last slide) – Thanks for pointing this out for me . Another discovery was it would work on subsequent slides if on every slide there was a gif image. Otherwise, all gif images will stop playing when scrolled to the particular slide.
Working
ion-slide-box
ion-slide
image(src="images/afteryou_logo.png" class="afteryou-logo")
ion-slide
image(src="images/afteryou_logo.png" class="afteryou-logo")
ion-slide
image(src="images/afteryou_logo.png" class="afteryou-logo")
Does not work
ion-slide-box
ion-slide
image(src="images/afteryou_logo.png" class="afteryou-logo")
ion-slide
span No Gif file
ion-slide
image(src="images/afteryou_logo.png" class="afteryou-logo")
I have noticed that I am unable to get an animated gif to play on iOS when using a local file. It works fine when it is a remote file like the example here.
Hi guys,
I circumvented this bug by putting on every slide (or until the one you want the gif to be playing in) a copy of the gif image with 1px width and height (setting width and height to 0px won’t work).
It’s not the most elegant solution one would hope for because gifs will already be mid-animation when changing slides but at least it works in some way!
yes i have same problem, it works fine on my browser, but blank on android device…
I have the same issue, appears to be a rendering issue with our iOS8 device. I have a group of slides which have a different GIF on each slide inside an ionicModal. All of the GIFs pause their animation when you do the first swipe transition, could be to do with hardware acceleration?
EDIT: Following GNSPS’s fix, that seemed to work for me! I ended up creating a couple of img tags just before the slider container element and made them 1x1 so they were being rendered on-screen but also not visible.