How to keep animated gifs animated while scrolling

Question

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)?

UPDATE:

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.

Answer 1

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.

Answer 2

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

• http://en.kuma-de.com/blog/2011-12-26/494
• http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
• http://cantina.co/thought_leadership/ios-5-native-scrolling-grins-and-gothcas/

It looks to be a problem others are having though:

• http://en.kuma-de.com/blog/2011-12-26/494
• -webkit-animation stops when scrolling on mobile safari

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.

• https://stackoverflow.com/a/25224086/1380685
• https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Using2Dand3DTransforms/Using2Dand3DTransforms.html