Autoptimize CSS Breaking on Edge w/ RevSlider Plugin

very hard to pinpoint @z3al0us … do you see any CSS (parsing) errors on Edge’s developer tools? can you confirm that when excluding your child theme’s CSS (themes/tcp-divi) it works or do you (also) need to exclude the parent theme (themes/divi)?

what you can do -if you can’t fix/ identify- is to disable AO on page(s) where you have revslider active using the AO API?

1. the font-thing is unrelated, as it’s triggered from the un-optimized dashicons.min.css
2. have you tried excluding revslider CSS (and/or JS) from autoptimization?
3. can you post a screenshot of the resulting (broken) page?

frank

Hi Frank! Thanks for replying!

I’m afraid I can’t send a screenshot or a link to the page while it’s broken, because that would require me to break it again… which I can’t in good conscience do. What I can do, however, is send this link to the WebPageTest site that was suggested to be used in cases like this, which has a screenshot of the broken page.

https://www.webpagetest.org/result/170922_SQ_07a53980ced8815dd1b018aaa8140355/

I attempted to disable the JS and CSS minification related to that plugin specifically, but was it didn’t seem to do the trick.

It was only broken on Edge/IE and not any other browsers at the time.

I hope this is helpful.

• This reply was modified 7 years, 1 month ago by z3al0us.

thanks @z3al0us. but excluding the Divi CSS does do the trick, right?

both @z3al0us & @jaruzek; do you have a non-production site where we could experiment with this?

OK, found something; for reasons I don’t know, the CSS is loaded like this;

<link type=" text/css" media="all" href="https://amusing-snails.flywheelsites.com/wp-content/cache/autoptimize/css/autoptimize_4876f309559394787aca200ad3ed1169.css" rel="stylesheet" />

In case you’ve missed it (as I did at first), there’s a space in the type attribute’s value, which causes IE to simply not load the stylesheet at all.

Now I’ve doublechecked my code and that space does not originate from Autoptimize, so the question is; what is adding that space (and how)? Is this revslider (which can be confirmed by disabling it briefly)?

Good eye. That does look like it would cause the break down. However, with autoptimize’s CSS minification deactivated, the space is removed / isn’t there in the <style> calls. Here’s the source link to the live site: view-source:https://www.tcpam.com/

There being a space there makes me think that maybe something is calling a type=”” variable for the stylesheet, but has an extra space?

I activated the CSS optimization briefly on my live site to confirm that it was indeed doing the same thing:
<link type=" text/css" media="all" href="https://www.tcpam.com/wp-content/cache/autoptimize/css/autoptimize_9e09b4f4766e1770d9d7c73c2238a541.css" rel="stylesheet" />

and I also checked another site (that doesn’t use the slider plugin) that I’m using the CSS minification on and I can confirm that it very much does not have the space there.
<link type="text/css" media="all" href="https://eo.ewdevsite.com/wp-content/cache/autoptimize/css/autoptimize_88e1242120fb6d5083365a0d12d21af6.css" rel="stylesheet" />

So there must be something going on with what I assume is the slider plugin. But it’s very strange that it would somehow add a space into the stylesheet link for your plugin, but no other stylesheet calls anywhere else, right?

So there must be something going on with what I assume is the slider plugin. But it’s very strange that it would somehow add a space into the stylesheet link for your plugin, but no other stylesheet calls anywhere else, right?

and

Edit: that extra space in type – I wonder if it has to do with the Divi theme since that is also a commonality on all our sites.

very strange indeed; seems a unique bug when combining AO + Divi + Revslider.

-> confirmed OK with only AO + Divi as per @jaruzek
-> what about AO + Revslider + other theme?

Both Divi & revslider are premium products, so that’s somewhat of an issue .. Could you briefly try an (a) staging/ dev site? or maybe @z3al0us ?