Conflict with Fancybox

  • Resolved wildmice

    (@wildmice)


    8 years, 9 months ago

    I was all set to use this plugin in production and happened to notice that it was breaking one of the sprites in Fancybox css (the closer ‘x’ at top right).

    When i add the fancybox css to the exclusion list the problem persists. I have to completely disable css optimization for it to work.

    Oddly, when i look at the merged and minified css file generated by the plugin, the css that doesn’t work seems to be intact.

    Since Chinese font names are getting mangled, i removed those for testing, but the problem is not that.

    So, when the plugin merges css, it seems to minify the concerned css without any problems, but is apparently doing something else that causes that css not to work. The sprite is still showing but is not positioned as it should be.

    I have also noticed another problem (have not dug into this one yet) where the back to top button disappears when the plugin’s css options are enabled.

    Sad to discover these things, because in so many ways this is a fantastic plugin.

    Frank, if you want the details of this let me know and i’ll send them over to you.

    https://wordpress.org/plugins/autoptimize/

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter wildmice

    (@wildmice)

    8 years, 9 months ago

    After a closer look at the back-to-top button problem, it appears that this one is caused by the javascript optimization and is not affected by the css options.

    Plugin Author Frank Goossens

    (@futtta)

    8 years, 9 months ago

    have you tried excluding fancybox from both JS and CSS optimization wildmice?

    frank

    Thread Starter wildmice

    (@wildmice)

    8 years, 9 months ago

    Hi Frank,

    I tried excluding both the CSS and JS, but it makes no difference.

    Let me see if i can reproduce the problem on a fresh install of WordPress.

    I’ll be back after i’ve tried that.

    Thread Starter wildmice

    (@wildmice)

    8 years, 9 months ago

    Ok, i’m back. I’ve reproduced the problem on a fresh WP install with no other plugins. Here is what i did :

    1. Install WordPress
    2. Activate the theme nelson-base (you have a link to this for the UTF-8 problem)
    3. Add a gallery to any post.
    4. Change [gallery ...] to [flexgallery …] (this is a shortcode that comes with the nelson-base theme)
    5. Visit the page and click on a gallery thumbnail. The full size lightbox image should have an “x” closer graphic at top right.
    6. Now activate the autoptimize plugin and check just the css optimize box.
    7. Try the gallery again. You should see that the “x” closer is now broken. Specifically, the sprite background image used for the graphic is shifted. However, if you look at the compressed css, it still appears to be good.

    Plugin Author Frank Goossens

    (@futtta)

    8 years, 9 months ago

    OK, I’ll have a look at this one of the next couple of days, when experimenting with the theme you provided.

    frank

    Thread Starter wildmice

    (@wildmice)

    8 years, 9 months ago

    Thanks Frank 😉

    Glad to hear that because i am kean to use this plugin in production if i can resolve the 3 issues i have experienced. If/when it looks like you are making progress on the UTF8 problem or this one, then i will dig into why it is also breaking a small back to top button and see if i can narrow down whether it’s the JS or the CSS that it’s breaking. More later on that one, which i haven’t posted yet.

    I am saving my 99% page speed screenshot, hoping i can put Autoptimize back on client sites and have that rating again 😉

    Plugin Author Frank Goossens

    (@futtta)

    8 years, 9 months ago

    OK, got it; it’s a bug in the CSS minifier AO uses, changing 

    a{background:0 0}

    into

    a{background:0}

    I’ve created a ticket for this over at YUI CSS compressor PHP port’t Github page.

    Possible solutions (while waiting on an official YUI-CSS-compressor fix);
    * change cssmin.php as described in the ticket
    * add a{background:0 0} to your inline stylesheet, overruling the incorrect code in the autoptimized CSS.

    Hope this helps,
    frank

    Thread Starter wildmice

    (@wildmice)

    8 years, 9 months ago

    Very nice catch Frank! Thank you 😉

    Thread Starter wildmice

    (@wildmice)

    8 years, 9 months ago

    I can confirm that making your recommended change to the yui css compressor php code does indeed fix the problem!

    Plugin Author Frank Goossens

    (@futtta)

    8 years, 9 months ago

    an extra workaround;

    a{background:0 .0}

    will not be broken by YUI CSS compressor and as .0 === 0 this fixes the problem as well … 🙂

    so as the root cause is known + and multiple workarounds are available, taking the liberty to mark as ‘resolved’ 😉

    kind regards,
    frank

    Thread Starter wildmice

    (@wildmice)

    8 years, 9 months ago

    This fix also resolves my problem with a broken back-to-top button.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Conflict with Fancybox’ is closed to new replies.