How to Keep Animated Gifs Animated While Scrolling on iOS Devices

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

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.

Swift UICollectionViewCell Animated View Randomly Blank When Scrolling

I solved the issue by setting the gifImageView.image = nil in collectionView(...cellForItemAtIndexPath) before assigning the image.

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCellWithReuseIdentifier("gifCell", forIndexPath: indexPath) as! GifCollectionViewCell
    cell.gifImageView.image = nil    // Added this line
    cell.gifImageView.image = gifs[indexPath.item % gifs.count]
    cell.infoLabel.text = String(indexPath.item)
    return cell
} 

Not sure how/why this fixed it but it works now.

Related Topics