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

This topic has 16 replies, 5 voices, and was last updated 2 years, 2 months ago by David.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
October 2, 2021 at 1:57 am #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.

October 2, 2021 at 6:28 am #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

October 2, 2021 at 6:34 am #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”.

October 2, 2021 at 7:20 am #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);
}
```
October 2, 2021 at 7:31 am #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
October 2, 2021 at 7:40 am #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.

October 12, 2021 at 3:37 am #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
```
October 12, 2021 at 3:45 am #1960801

Tim

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

October 12, 2021 at 4:26 am #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.

October 13, 2021 at 6:41 am #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.
October 13, 2021 at 9:36 am #1962428

David
Staff
Customer Support

Thanks for responding Dajuan

October 13, 2021 at 10:29 am #1962489

Tim

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

October 13, 2021 at 8:27 pm #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

October 16, 2021 at 12:11 am #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. 🙁

October 16, 2021 at 6:48 am #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.
Author

Posts

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

You must be logged in to reply to this topic.

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

Popular Articles

Start building better websites today.