The amount of page content affects the smoothness of the animation on mobile devices.

ian.html's Avatar

ian.html

16 May, 2015 09:55 AM

Hi Dmitry,

After testing on iOS and Android, I found that the amount of page content affects the smoothness of the animation of the slider on mobile devices.

At first, during the animation of the sliding of every slide, the animation paused like 0.1 second and then continued animating.

And after I removed other page contents and only left the slider itself on the page, the issue is gone.

Is there a way to fix this issue?

  1. Support Staff 1 Posted by Dmitry Semenov on 16 May, 2015 06:47 PM

    Dmitry Semenov's Avatar

    Hi,

    Make sure that the specific element isn't causing the issue. In some cases if you overlay slider with some element that has box-shadow/text-shadow or with some pseudo-elements – animation issues can appear.

    Dmitry

  2. 2 Posted by ian.html on 17 May, 2015 03:31 AM

    ian.html's Avatar

    Hi Dmitry,

    The slider doesn't overlay with any element.

  3. Support Staff 3 Posted by Dmitry Semenov on 17 May, 2015 12:53 PM

    Dmitry Semenov's Avatar

    Please link to the page with the issue.

  4. 4 Posted by ian.html on 17 May, 2015 01:38 PM

    ian.html's Avatar

    Okay. Since this is currently an unfinished project of one of my clients, I couldn't make the url public. I had just sent the file to your Gmail inbox.

  5. Support Staff 5 Posted by Dmitry Semenov on 17 May, 2015 06:15 PM

    Dmitry Semenov's Avatar

    If you look at the page closer, especially sidebar, you'll see that text blinks a bit during the navigation. It means that some elements are overlapping over the other hardware-accelerated elements.

    You can confirm this by opening Safari remote debugger and switching to Layers tab. According to Safari debugger here are elements that overlap (slider or each other):

    #contentinfo,
    #banner,
    article,
    
    /* A and LI might be just in top menu or footer, haven't tested */
    a,
    li,
    
    /* P might be because it overlaps with something from above */
    p {
        -webkit-backface-visibility: hidden;
    }
    
    /* because of border style on thumbs */
    .rsNav,
    .rsNavItem,
    .rsThumbsArrow {
        -webkit-backface-visibility: hidden;
    }
    

    Forcing hardware acceleration on them (via backface-visibility) will remove the lag. But it's not ideal way to fix the problem, as it potentially can cause other performance issues on initial page load. As I posted before, such overlapping may be caused by :before, :after pseudo elements, look in your CSS.

  6. 6 Posted by ian.html on 18 May, 2015 01:19 AM

    ian.html's Avatar

    Thank you for the explanation. I have to admit that I currently isn't a debug expert. Although I know how to use Firebug, using "Safari remote debugger" is beyond my ability.

    As mentioned in email, after removing all other contents, I found issue actually still exists, just became more slight. So maybe #contentinfo, #banner, a, li, p, ... etc aren't the causes. Please correct me if I'm wrong.

    And there is no CSS deceleration "-webkit-backface-visibility: hidden;" in my CSS files. So I'm not sure if I understand what you mean.

    As for ::before and ::after pseudo elements. I did use them on the .rsArrow and .rsThumbsArrow elements. But after I commented out the CSS rules related to the said pseudo elements, the issue still exists.

  7. Support Staff 7 Posted by Dmitry Semenov on 18 May, 2015 06:07 AM

    Dmitry Semenov's Avatar

    And there is no CSS deceleration "-webkit-backface-visibility: hidden;" in my CSS files. So I'm not sure if I understand what you mean.

    You need to add CSS code from my above message to your page.

  8. 8 Posted by ian.html on 18 May, 2015 06:33 AM

    ian.html's Avatar

    Thank you very much. With your above code, this issue has been fixed successfully.

    And please allow me to ask one more question about another issue at here since we still need the same files for the demonstration of the issue. But if I have to start a new thread to ask the issue, please let me know. The issue is that as soon as the slider finishes fading in the first slide (after the initialization), the first slide blinks one time. It happens only on mobile devices, too, not on desktop browsers. How could I prevent the blink from happening?

  9. Support Staff 9 Posted by Dmitry Semenov on 18 May, 2015 02:11 PM

    Dmitry Semenov's Avatar
  10. 10 Posted by ian.html on 18 May, 2015 02:22 PM

    ian.html's Avatar

    Thanks. If I understand correctly, the link explains how to avoid FOUC (Flash of Unstyled Content). However, my current issue isn't FOUC because it only happens after RoyalSlider is successfully initialized and right after the first slider finishes fading in.

  11. Support Staff 11 Posted by Dmitry Semenov on 18 May, 2015 07:23 PM

    Dmitry Semenov's Avatar

    For some reason I can't repeat the issue on page that you sent. Try using such markup for first slide(s):

    <div>
       <img src="slide-1-image.jpg" />
    </div>
    
    <div>
       <img src="slide-2-image.jpg" />
    </div>
    

    ... slider will ignore such images, so you'll need to handle scaling and centering of them by yourself via CSS or JS.

  12. 12 Posted by ian.html on 19 May, 2015 03:04 AM

    ian.html's Avatar

    Well, I checked it again and found it only happens on iOS, not on Android. Anyway, thanks for your suggestion.

  13. 13 Posted by Genc.TR on 30 Dec, 2018 07:49 PM

    Genc.TR's Avatar

    Hi Dmitry,

    Same blinking issue for the slider animation (only on the first loop*).

    I did my best with debugging & layers but couldn't find a proper solution. Can you please help me about the code I need to add to CSS?

    Thank you in advance.

    The url: http://n2i.75c.myftpupload.com/

  14. Support Staff 14 Posted by Dmitry Semenov on 30 Dec, 2018 08:12 PM

    Dmitry Semenov's Avatar

    @Genc.TR please elaborate on which exactly device & browser do you get the issue.

  15. 15 Posted by Gencer Soytemiz on 30 Dec, 2018 08:14 PM

    Gencer Soytemiz's Avatar

    On android & chrome.

  16. Support Staff 16 Posted by Dmitry Semenov on 30 Dec, 2018 11:15 PM

    Dmitry Semenov's Avatar

    @Genc.TR, likely this is happening because you're using too large images and the first delay is caused by decoding. Either reduce size in Image Options, or use custom WordPress image size, or use responsive images.

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