gif animation can not be played on iOS 8 #662

Closed
liuweifeng opened this Issue Dec 9, 2014 · 5 comments

Projects

None yet

3 participants

@liuweifeng

Sorry for my poor English.
If the gif is the first image, no problem; if you slide from the other image to th gif, the gif not be played on iOS 8

Demo is here ~

@dimsemenov
Owner

Thanks for bug report. Here is what I've found:

  • Issue doesn't seem to happen on iOS7.
  • GIF image seems to freeze only when it was out of the window.
  • Forcing paint on image when it's "current" fixes the issue, for example such code can be used:
var iOSv;
if (/iP(hone|od|ad)/.test(navigator.platform)) {
    iOSv = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
    iOSv = parseInt(iOSv[1], 10);
}

if(iOSv >= 8) {
    yourGalleryInstance.listen('afterChange', function() {
        if(gallery.currItem.src.indexOf('.gif') > 0) {
            var currHolder = gallery.itemHolders[1];
            if(currHolder && currHolder.el) {
                var imgs = currHolder.el.getElementsByClassName('pswp__img');
                if(imgs.length) {

                    var img = imgs[imgs.length - 1];
                    // toggle opacity on gif IMG
                    img.style.opacity = img.style.opacity == 0.99999 ? 1 : 0.99999;
                }

            }
        }
    });
}

Even though this code fixes the issue, I don't recommend to add animated gifs in PhotoSwipe at all, as it hurts performance a lot.

Also, reducing size of gif might help (even by changing only w and h properties that you pass to PhotoSwipe), see issue #820

@liuweifeng

@dimsemenov , very good! It works! Thank you very much !

@liuweifeng liuweifeng closed this Dec 12, 2014
@andfinally

@dimsemenov PhotoSwipe is great, thanks! Have you considered applying visibility: hidden to the parents of non-current images? Maybe this will reduce repaints and improve performance when some of the images are animated GIFs.

@dimsemenov
Owner

@andfinally, PhotoSwipe keeps only 3 slides in DOM, I don't think that hiding 2 nearby slides will increase performance much, but it should be tested to tell for sure. You can hide them in afterChange event gallery.itemHolders[0], gallery.itemHolders[2] are prev and next slide DOM elements.

@andfinally

@dimsemenov I see, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment