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

Question

I know this has been asked before , but I'm still not convinced that this is not a workaround. The reason I am not convinced is that I was able to accidentally hide these gifs on my website. I posted this in a chat here and using @CarrieKendall came up with this script .

This is obviously not the right solution, so I would like to publish it here for you, geniuses, to figure it out and try to help me figure out how I can fix this problem (so that it is not too hard)?

UPDATE:

Ok, so I worked a bit with 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; } 

Strange, but it works. An animation that does absolutely nothing. Oh, and I tried to replace the translation with something like a scale, but that didn't help. This is the “purest” form of this strange mistake / decision.

However, I am not quite satisfied yet. I would love it if someone more knowledgeable than me could look at it and try to understand what REALLY happens, what makes it work ... work. I hope there is something here that can be used, albeit in a more elegant way.

In addition, I have no idea how resource intensive would be something like the solution described above, so if someone can help me measure that it will be awesome.

Answer 1

The same restrictions do not occur in a desktop browser. This is characteristic of the scroll implementation that Apple has on its mobile device. This is a hold from their old mobile devices to ensure that scrolling stays smooth, as previous iPhones made wise use of accelerated rendering throughout their OS.

Starting hardware acceleration changes the page rendering path. On a page without acceleration, the browser displays directly on the screen texture. When scrolling, all other operations stop because the smooth scroll renderer takes over the rendering control. This is not limited to GIFs. If javascript would change the contents of the page, it would also not be displayed until the page completes scrolling.
On an accelerated page, accelerated objects are actually sent to the linker. The composer places all layers of objects in the right place, and then creates a composite texture for placement on the screen. Scrolling is actually part of the layout task, and since the composer is responsible for rendering from end to end, the animation will continue.

Unfortunately, due to the design of the Apple system linker, there really is no “right” way. In fact, as Apple makes updates for iOS, there have been changes in hardware acceleration and what not. For example, in iOS6 save3d no longer triggers acceleration. Supposedly
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
should still work. In your case, I think this works because you use keyframes.

In terms of performance / resource, your page will not use 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 can cause hardware acceleration in your animation 0% and 100% or in the class .link, etc ... on an iOS device?

More about another answer to a similar problem: - fooobar.com/questions/43167 /.

 .link{ -webkit-animation: WIGGLE 1ms; animation: WIGGLE 1ms; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0,0,0); } 

The solution came with the provision of "position: relative; z-index: 1000; display: block css properties to the entire container that contains the scroll element, and there is no need to give translate3d for child elements.

URL Link

• 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/

The problem seems to be related to others:

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

If you succeed, you can use the old-school technique below to keep the animation with less demanding operations

You can always use a Base64 encoded technique in your initial uploaded CSS file.

I recently posted another question related to a question related to it. Thus, the animation is continuous, pre-loaded and cached for quick and quick invocation via css. You can also use SVG, PNF, JPG and many other image formats for scaling and recalibration.

Please read the information below to learn more about this.

• fooobar.com/questions/548020 / ...
• https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Using2Dand3DTransforms/Using2Dand3DTransforms.html