[Resolved] WP Rocket’s “Remove Unused CSS” breaks Off Canvas menu

Home Forums Support [Resolved] WP Rocket’s “Remove Unused CSS” breaks Off Canvas menu

Home Forums Support WP Rocket’s “Remove Unused CSS” breaks Off Canvas menu

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1950110
    Tim

    Hi,

    I have tested WP Rocket’s new Remove Unused CSS function. Enabling this option boosts my mobile PageSpeed Insights score by about 30 so I’d really like to have it enabled.

    The only issue I have noticed having this on, is that the Off Canvas menu gets broken.

    When the page loads, the menu stands out a little from the side of the screen, and the page is broken, content is missing, links don’t work etc.

    WP Rocket gives the option to exclude CSS files, and I have added both these entries without it doing anything unfortunately:

    /wp-content/plugins/gp-premium/(.*).css
    /wp-content/themes/generatepress/assets/css/(.*).css

    Obviously something is happening with some CSS related to the menu, but what more can I try to exclude?

    The issue is there on my iPhone and on my MacBook, but not on my Windows computer with a larger screen resolution.

    #1950249
    David
    Staff
    Customer Support

    Hi there,

    try excluding this file:

    offside.min.css

    The relative director is:

    wp-content/plugins/gp-premium/menu-plus/functions/css/offside.min.css

    #1950255
    Tim

    Didn’t help unfortunately :/

    Maybe you can go in and see for yourself. URL attached.

    The menu slides out a little when starting to scroll and it breaks the whole page.

    Happens on almost every page on the site. You have to use an actual phone, the issue isn’t there on desktop or in Chrome’s mobile “emulator”.

    #1950305
    David
    Staff
    Customer Support

    Not sure what WP Rockets Used CSS is doing – never thought that inline 1000’s of lines of CSS in the <head> was a good idea lol, but one issue i see is this CSS:

    body .main-navigation.offside {
        width: 350px;
    }

    To make the Off Canvas Panel wider. Did you add any other CSS to account for the offscreen position or is WP Rocket just not including it ?

    ie.

    .offside, .offside--left {
        left: -350px;
    }
    
    .offside--left.is-open, .offside-js--is-left .offside-sliding-element {
        transform: translate3d(350px,0,0);
    }
    #1950313
    Tim

    I added this code a few months ago to make the Off Canvas Panel wider.

    I removed it just now and it seems that fixed my problem!

    body .offside--left.is-open, .offside-js--is-left .offside-sliding-element {
        -webkit-transform: translate3d(350px,0,0);
        -moz-transform: translate3d(350px,0,0);
        -ms-transform: translate3d(350px,0,0);
        -o-transform: translate3d(350px,0,0);
        transform: translate3d(350px,0,0);
    }
    body .offside--right.is-open, .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(-350px,0,0);
        -moz-transform: translate3d(-350px,0,0);
        -ms-transform: translate3d(-350px,0,0);
        -o-transform: translate3d(-350px,0,0);
        transform: translate3d(-350px,0,0);
    }
    
    body .main-navigation.offside {
        width: 350px;
    }
    body .offside--left {
        left: -350px;
    }   
    body .offside--right {
        right: -350px;
    }
    body.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
        left: 345px;
    }

    So I guess the question is then how I can have this code without WP Rocket messing it up

    #1950320
    David
    Staff
    Customer Support

    According to their docs, if you exclude the stylesheet that the CSS is in then it should ignore it…. so if its in a Child Theme style sheet you would exclude that, if its in the Additional CSS – i don’t know as their docs don’t cover that.

    Probably best to ask WP Rocket for assistance there.

    #1960799
    Dajuan

    I had the same problem. I added the following entries in “Exclude JavaScript Files” then re-enabled Remove Unused CSS and all is well:

    /generatepress/assets/js/main.min.js
    var generatepressMenu
    #1960801
    Tim

    Thanks for the tip. Unfortunately, it doesn’t fix the problem for me :/

    #1960826
    David
    Staff
    Customer Support

    I checked WP Rockets documentation about excluding CSS from its optimization:

    https://docs.wp-rocket.me/article/1529-remove-unused-css

    Under the heading of:

    How to exclude files from this optimization / retain selected CSS rules on a page

    It says you can safelist CSS selectors by adding them in a list to the exclude field.

    #1962074
    Dajuan

    I received a response from WP Rocket:

    Activate Remove Unused CSS.

    Add the following in the text area that’s under the Remove Unused CSS feature:

    .secondary-navigation
    .toggled
    .toggled-on
    .sfHover

    Save WP Rocket’s settings.

    #1962428
    David
    Staff
    Customer Support

    Thanks for responding Dajuan

    #1962489
    Tim

    Thanks Dajuan, but unfortunately my issue is still not resolved.

    #1962786
    Elvin
    Staff
    Customer Support

    Hi Tim,

    You may want to consider disabling “remove unused CSS” as it’s flaky on pages with interactivitiy on page elements that moves/toggles.

    WP Rocket may find some CSS “unused” if its not being applied when the page loads.

    But the fact is, while some CSS are “unused” when the page loads, some CSS are needed when you press buttons.

    That’s likely what happens to your page. WP Rocket removes the CSS class styling that aren’t use on page load but it needed by the off-canvas menu when the script toggles the classes.

    IF WP Rocket’s “Remove Unused CSS” feature has a exclusion, try excluding all things from /wp-content/plugins/gp-premium

    A wise man once said:
    "Have you cleared your cache?"

    #1965003
    Tim

    I see, I guess I can’t use this option then. As I said it bumps the pagespeed score by 30 on mobile and the only issue I have experienced is the menu. 🙁

    #1965182
    David
    Staff
    Customer Support

    I would suggest talking to WP Rocket support – they know our theme quite well, and they may have some pointers on what there code is doing to cause the problem.

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.