Support » Plugin: Autoptimize » Autoptimize CSS Breaking on Edge w/ RevSlider Plugin

  • z3al0us

    (@z3al0us)


    Today I noticed on a site I manage that the RevSlider CSS and the Autoptimize plugins are no longer playing nice together. If I deactivate the RevSlider everything is rainbows and sunshine – same goes if I deactivate the CSS minification on Autoptimize. Removing either of these resolves the issue, but isn’t really any option.

    For the time-being, I have turned off CSS minification in Autoptimize so that it doesn’t break on Edge. Here is a breakdown from a site I noticed you suggested to use in a previously answered support topic: https://www.webpagetest.org/result/170922_SQ_07a53980ced8815dd1b018aaa8140355/

    Since I’ve pin-pointed that it’s the RevSlider and the CSS that’s causing conflict, I attempted to remove all-things-rev slider from the CSS minification query by making that field say: “plugins/revslider/, admin-bar.min.css, dashicons.min.css” – no dice. I tried some different variations of the above code with *, with/without tailing slashes, more specific declarations… etc nothing seemed to give. So I’m thinking that maybe the plugin is already ignoring the CSS, but it’s something else that’s causing the Theme’s CSS to not load…

    To that point, removing the Theme’s CSS from the plugin sort of defeats the whole point of that option in the first place. πŸ™

    So here I am, asking for help. πŸ™‚ Any ideas on what I should exclude to make the theme’s CSS load correctly on Edge?

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    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?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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 1 year, 11 months ago by  z3al0us.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

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

    
    <link type=" text/css" media="all" href="http://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:http://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="http://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="http://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?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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 ?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Autoptimize CSS Breaking on Edge w/ RevSlider Plugin’ is closed to new replies.