How to keep animated gifs animated while scrolling on iOS devices?


Tags: ios,css,image-processing,scroll,gif

Problem :

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.



Solution :

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.


    CSS Howto..

    How to create the corner that show in picture with css in webpage?

    How To Expand A Textarea To 100% Using CSS Only

    How to apply more than 1 CSS styles in javaScript? [duplicate]

    CSS : How can I add shadow to a label or box

    How to do HTML/CSS form helpers/popover

    How to set a div within text?

    How to get similar style as JQuery UI website itself

    How can I get the current state of my div animation?

    In jQuery how do I make multiple changes to css in a function?

    How do I override a css value?

    How do I correct this error?

    How to skew element but keep text normal (unskewed)

    How to place HTML elements over inline SVG

    how to call all Google font CSS under specific font face

    How to solve CSS -webkit-appearance issue

    How to create a caption for a pure CSS/HTML Slider with thumbnails, no java/jquery

    How can you align all the cells to the left with css [closed]

    How to stick a footer to bottom in css?

    How do I place an image after a link?

    CSS How to make image fluid extending only to one side of browser, aligned with centered content?

    How to make 1 table scrollable with fixed header without affecting other tables in Bootstrap

    How can I style the n-th div with CSS

    sunken border when background-color css specified - how to avoid?

    How to embed a php/javascript photogallery in a page of an html/css website?

    How to add style or put a class in a php form_submit button

    How can I make the header's border/other content not overlap the img on the left?

    How to move an image up and down smoothly with CSS?

    css margin-left propery - how to specify for various browsers [closed]

    Jquery how to get specific css values from css properties with stacked value options such as font-family

    CSS: How to specify a min-width on a table?