Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1203643
    clarityconsultants
    Participant

    Referencing a previous forum post: https://community.theme.co/forums/topic/choppy-scrolling/

    We are having issues with fade animations for columns (in cornerstone) taking a long time to render in webkit based browsers like Chrome and Opera. It is especially problematic on our front page which has a rather sizeable revolution slider. In IE and Firefox fade animations render fine.

    I tested both of the following in the Custom CSS section in Cornerstone on our front page;
    #1) * { -webkit-transform: none !important; }
    #2) * { -webkit-transform: translateZ(0) !important; }

    #2 had no effect, however #1 did fix the issue. Fade animations work well in webkit with that setting in place. The problem however is they break the navigation on our slider. The thumbnails shift below the fold, and the radio nav on the right disappears. Not a deal breaker if I can fix it in Rev Slider and still preferred to slow fade animations. Any other fix that can work happily with revolution slider?

    You can test with and without the “* { -webkit-transform: none !important; }” CSS setting on the front page by using our Stage versus Prod sites.

    Stage: http://a52.b4e.mwp.accessdomain.com/ (has CSS fix, but breaks slider)
    Prod: http://clarityconsultants.com/ (no CSS fix, notice the slow fade animations below the fold on columns when using Chrome/webkit and no cache)

    You guys rock! Thanks for the help as always!

    #1203968
    Lely
    Moderator

    Hi There,

    Please try updating the CSS to this:

    .x-column[data-fade="true"] {
        -webkit-transform: none !important;
    }

    Asterisk will target everything. Lets make it more specific to target just the columns with fade effects.

    Hope this helps.

    #1210465
    clarityconsultants
    Participant

    I updated the code and this seems to work great! Revolution Slider issues are gone and I am seeing much more consistent performance of fade animations in Chrome and webkit browsers. Thank you so much!

    #1210549
    Nabeel A
    Moderator

    Glad we could help.

    Cheers!

  • <script> jQuery(function($){ $("#no-reply-1203643 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>