Gallery with 'fade' flickers on Android phones (Chrome, Firefox)

zolotukhin.ivan's Avatar

zolotukhin.ivan

01 Dec, 2016 06:28 PM

Hi! I've been investigating very annoying issue with gallery images flicker when chanding slides. When next slide is replacing the current with 'fade' transition (CSS transition, cubic-bezier default), fading out over current image it looks like current image appears for a moment at the end of animation. I was able to reproduce this on every of my three Android phones available and also on physical devices using browserstack.com. Tried everything I could find here in the knowledge base and over the internet (playing with z-indecies, backface-visibility and transform3d for webkit), and no hack actually did help. This issue affects only galleries with CSS transition fade mode. When allowCSS3 set to false everything is allright.
So I dig into the RS JS code and found blocks like this one
oldBlock.data('rsTimeout', setTimeout(function() {
oldBlock.stop(true, true).css({
opacity: 0,
display: 'none',
zIndex: 0
});
}, self._currAnimSpeed + 60) )
where timeout for removing old slide is set by adding magic number 60 to transition speed.

Well, if I change '60' here and there for '185' then issue is fixed. Seems that sometimes "currAnimSpeed+60" is just not enough for fade transition to finish.

My issue is fixed by hacking the core so I don't actually need help with that. Just wanted to share. Thanks

  1. Support Staff 1 Posted by Dmitry Semenov on 01 Dec, 2016 11:07 PM

    Dmitry Semenov's Avatar

    Hello,

    Thank you, using transitionend event instead of timeout might also help fix the problem, but it's not very reliable.

    Btw, if you need very basic transitions, you can implement them just via CSS using active slide class http://help.dimsemenov.com/kb/royalslider-javascript-api/adding-cus...

    Dmitry

  2. 2 Posted by zolotukhin.ivan on 27 May, 2018 08:53 PM

    zolotukhin.ivan's Avatar

    Dmitry, can you please give me an example of how to use this activeClass technique to achieve simple fade in - fade out effect on gallery images when slide changes?

  3. Support Staff 3 Posted by Dmitry Semenov on 28 May, 2018 04:30 AM

    Dmitry Semenov's Avatar

    Hello,

    1. Add option addActiveClass:true to slider initialization, or add class to the selected slide via API.
    2. Use this class to apply scale any kind of CSS transition, e.g.:
    .royalSlider .rsSlide img {
      opacity: 0.45;
      -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    
      -webkit-transform: scale(0.9);  
      -moz-transform: scale(0.9); 
      transform: scale(0.9);
    }
    .royalSlider .rsActiveSlide img {
      opacity: 1;
      -webkit-transform: scale(1);  
      -moz-transform: scale(1); 
      transform: scale(1);
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac