I know this has been asked before but I'm still not convinced there's not a workaround. The reason I'm not convinced is because I managed to keep those gifs animated on a website of mine by accident. I posted this in the chat here and with help from @CarrieKendall came up with this fiddle.
This is obviously not a proper solution so I wanted to post it here for you geniuses to pick apart and try to help me figure out how I can fix this problem (in a way that preferably is not too resource heavy)?
Ok, so I tinkered a bit more with the jsfiddle and came up with this:
HTML
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
CSS
@-webkit-keyframes WIGGLE {
0% { -webkit-transform: translate(0px, 0px); }
100% { -webkit-transform: translate(0px, 0px); }
}
keyframes WIGGLE {
0% { -webkit-transform: translate(0px, 0px); }
100% { -webkit-transform: translate(0px, 0px); }
}
.link{
-webkit-animation: WIGGLE 1ms;
animation: WIGGLE 1ms;
}
It's strange, but it works. An animation that does absolutely nothing. Oh and I tried replacing translate with something like scale but that didn't do the trick. This is the "purest" form of this weird bug/solution.
That said though, I'm not quite satisfied yet. I'd love it if someone more knowledgeable than me could have a look at this and try to figure what is REALLY going on that makes this workaround... work. Hopefully there's something in here that can be used, albeit in a more elegant way.
Also, I have no idea how resource intensive something like the above workaround would be, so if someone could help me measure that that'd be awesome.
GIFs didn't always move, in fact they began as a way of displaying still images such as logos. An animated GIF is essentially a digital flipbook of images cycling through a stack of images on a loop.
It's recommended to use CSS for scroll-triggered animations, but you can also create the animation using JavaScript. You can also use a scroll animation library to use JavaScript to add and remove classes to elements when they are scrolled into view. There are lots of options for this, including Sal. js, AOS, and Josh.
Create a GIFTap a resolution button (Small, Medium, Large, or XL). Tap Slide Range, use the number wheel to set the beginning and ending slide number, then tap Animated GIF Options. Tap Frame Rate, tap an option (the lower the number, the slower the animation), then tap Animated GIF Options.
The same restrictions don't occur on a desktop browser. This is specific to the implementation of scrolling that Apple has on their mobile device. It's a hold-over from their older mobile devices to make sure scrolling stays smooth, as earlier iPhones made judicious use of accelerated rendering throughout their OS.
Triggering hardware acceleration changes the render path of the page. In a non-accelerated page, the browser renders directly to the onscreen texture. When scrolling, all other execution is stopped, because the smooth scroll renderer takes control of rendering. This is not limited to just GIFs. If javascript would have changed the page content, it would also not show until the page finished scrolling.
In an accelerated page, the accelerated objects are actually sent to the compositor. The compositor puts all the layers of objects in the right place, and then creates a composite texture to put on the screen. Scrolling is actually part of the compositor's job, and since the compositor is in charge of rendering from end-to-end, animations will continue.
Unfortunately, due to the design of Apple's system compositor, there is really no 'right' way. In fact, as Apple has been making updates to iOS, there have been changes to what is hardware accelerated, and what isn't. For example, in iOS6, preserve3d no longer triggered acceleration. Supposedly,-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
should still work. In your case, I believe it works because you are using keyframes.
In terms of performance/resource impact, your page won't use any more resources than any other accelerated page.
Have you tried -webkit-transform-style: preserve-3d;, -webkit-transform: translate3d(0,0,0); or other CSS selectors that might trigger hardware acceleration in your animations 0% and 100% or in the .link class etc... on the iOS device?
Read more from another answer to a similar problem: - https://stackoverflow.com/a/10170170/1380685
.link{
-webkit-animation: WIGGLE 1ms;
animation: WIGGLE 1ms;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0,0,0);
}
The solution came with giving "position:relative; z-index:1000;display:block" css properties to the whole container that holds the scroll element and there is no need to give translate3d to child elements.
Reference URL's
It looks to be a problem others are having though:
If you can get away with it you can use an old-school technique below to have animation persist with less resource intensive operations
You could always use the Base64 encoded asset technique within your initial loaded CSS file.
I recently posted to another question recently asking something kind of related. This way the animation is continuous and preloaded and cached for easy and fast recall via css. Also you can use SVG, PNF, JPG and many other image formats for scaling and re-sizing.
Please read the information posted on the link below to red more about this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With