Mobile Menu/header region issue

Erm, so upon further inspection, this seems to have broken the rest of the page (if you look at the gallery/videos, and the bottom of the page)
Should I open a new ticket in the AO support forum?

• This reply was modified 5 years, 7 months ago by thealonsotron.
• This reply was modified 5 years, 7 months ago by thealonsotron.

hmmm … first thing would be to isolate the root cause;
1. disable AsyncJS
2. try if it works with just Autoptimize?
3. if not, try disabling CSS or JS optimization to see which one causes this?

Here’s what I did;

Disabled AsyncJS – No change
Ticked off “Optimize JavaScript Code” – No change
Ticked off “Optimize CSS Code” – No change
Ticked off “Optimize HTML Code?” – No change

I’m at a bit of a loss

so all optimize options in AO are off and it’s still broken?

I had missed one at the bottom of the AO plugin. “By default files saved are static css/js, uncheck this option if your webserver doesn’t properly handle the compression and expiry.”

Now the gallery is fine again. So I guess switch the options back on and figure out which is the culprit, then report back?

• This reply was modified 5 years, 7 months ago by thealonsotron.

So I guess switch the options back on and figure out which is the culprit, then report back?

yes please ??

So this is a bit discouraging. Here’s what I did:

Ticked on “Optimize HTML Code?” – Gallery broke again
Switched off
Ticked on “Optimize JavaScript Code” – Gallery broke again
Switched off
Ticked on “Optimize CSS Code” – Gallery broke again
Switched off
Ticked on “Enable Async JavaScript” – Gallery was fine
deactivated again

So now, Async JS & AO both have all options off again. Any ideas?

Weird .. what plugin are you using to create that gallery?

Huge-It Video Gallery. What’s weirder is it was working fine before, with AO, and is in the excluded script list.

There’s equally this little bit of extra CSS

@media only screen and (max-width: 480px) {
.huge_it_videogallery .huge_it_big_li {
border: 0px !important
}
}

but that’s it. =/

• This reply was modified 5 years, 7 months ago by thealonsotron.
• This reply was modified 5 years, 7 months ago by thealonsotron.

hmm … can you try this code snippet;

add_filter('autoptimize_filter_js_minify_excluded','__return_false');
add_filter('autoptimize_filter_css_minify_excluded','__return_false');

Added the snippet to my functions.php. Testing AO now

Ticked on “Optimize HTML Code?” – Nothing broken
Ticked on “Optimize JavaScript Code” – Everything still fine
Ticked on “Optimize CSS Code” – All is well
Ticked on “Enable Async JavaScript” – Still OK

Switched back Async settings (switch from defer to async, and switched enable autoptimize support again) – All is well!

That snippet seems to have fixed the problem

Now, my question is, can I do anything about that video gallery? It seems any attempts to optimize it via AO breaks it, so I’m forced to just exclude it.

Thank you very much for your help so far <3

super! ??

the logic in the 2 snippets will be available as one option in the Autoptimize update (2.5.0) that will very likely be released this weekend, so at that point you can disable the snippets and deactivate the “minify excluded CSS/ JS”-option instead.

Another question for you, I wanted to try using cloudflare as a CDN but unfortunately this breaks the gallery yet again.
I only ask because you mentioned it earlier, but do you know what may be causing this conflict? Else, I can move to cloudflare support =)