WordPress.org

Ready to get started?Download WordPress

Forums

Better WordPress Minify
[resolved] CSS not loading in Firefox (21 posts)

  1. outpostmm
    Member
    Posted 5 months ago #

    Hello,

    I'm working on setting up your plugin on this site:

    http://dev.mycareertopia.com/

    Initially it worked great, the total number of Javascript and CSS files went from 80 (!) to 24, with smaller size. However, only Chrome was loading the site correctly. Firefox, Opera, and IE were showing missing styling and text on the home page. After some troubleshooting, it looks like if I set the number of minify strings per file to only 4 or above, then Firefox will not style the home page. I have it set to 4 right now so that you can see. It looks like Opera, IE, and Chrome all work fine at 4, but Firefox shows missing styling unless I change that setting to 3.

    Do you know what I can do in order to get that number higher? I'd like to go back to 24 requests, most of the other ones are third party sites that I can't control but it's a great savings.

    Thanks

    https://wordpress.org/plugins/bwp-minify/

  2. Khang Minh
    Member
    Plugin Author

    Posted 5 months ago #

    That is one weird issue. Maybe you want to try version 1.3.0-beta out?

    https://github.com/OddOneOut/Better-WordPress-Minify/archive/1.3.0.zip

    You just need to use FTP to remove old plugin folder and replace with 1.3.0.

  3. outpostmm
    Member
    Posted 5 months ago #

    It looks like Firefox will now work with 4 files, but not 5 or more.

    I'm still looking into this. Let me know if I can help debug anything.

  4. Khang Minh
    Member
    Plugin Author

    Posted 5 months ago #

    I will need a temp admin account to test BWP Minify settings, and I assume that you have installed 1.3.0?

    I'm viewing the site with Firefox and it seems to look fine (4 files per string).

  5. outpostmm
    Member
    Posted 5 months ago #

    I've set you up an account, it should have sent the password to contact@betterwp.net. I did install the beta version you linked to. It does work correctly with 4 files now, although it stops working in Firefox at 5. So, that's one better than the previous version.

  6. Khang Minh
    Member
    Plugin Author

    Posted 5 months ago #

    Hi, I've managed to trace down the two CSS files that are causing issue:

    1. dt-custom.less wp-content/uploads/wp-less/dt-the7/css/custom-8aff9937cd.css
    2. dt-royalslider wp-content/themes/dt-the7/royalslider/royalslider.css

    When those two files are combined and printed above these two lines:

    <link rel='stylesheet' id='dt-font-h1-skin5-css'  href='http://fonts.googleapis.com/css?family=Open+Sans%3A300&ver=3.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='dt-font-h3-skin5-css'  href='http://fonts.googleapis.com/css?family=Open+Sans&ver=3.8.1' type='text/css' media='all' />

    they break either the header or the slider. The first one t-custom.less seems to break the header while dt-royalslider seems to break the testimonial slider.

    I've put them into print separately list and your site looks ok now (you can play with the max files per string if you want, but I tested with 10, 15, 20 and all seem to work). But still I'd love to know what's wrong with those two files. Is there anything special about them? The fact that it only breaks in Firefox is really weird :-/

  7. outpostmm
    Member
    Posted 4 months ago #

    Yeah that sounds strange. Those two are theme files, I know that much. I'm a little removed from the site, I'm a developer helping a friend who actually put the site together. I'll probably notify the theme developers to take a look at this thread and see if they have any information. Thanks for looking into it.

  8. joneslloyd
    Member
    Posted 4 months ago #

    Hi there,

    I've used this plugin for a while (it's great), but I've also started to get no display of stylesheets in Firefox only (Chrome, IE, Safari, etc. work fine).

    I've disabled BWP on the live site, but I've got an exact copy of the site here:
    http://backlinko.staging.wpengine.com/

    And if you view it in (say) Chrome, you'll see the stylesheet has an effect (site looks normal) but if you view in Firefox, it's a white page with no styling.

    I've tried all sorts of things (including downloading the release candidate you posted further up this thread) but the error persists. I've also minified each stylesheet separately, but this also hasn't helped.

    Looking at the site I've linked to, can you see any reason why it's breaking?

    One thing of note is that if I right-click and do "Inspect Element" in Firefox, and make *any* edit to the stylesheet (type a random character anywhere), suddenly the whole stylesheet appears and the site displays perfectly.. Which is odd..

    Thanks if advance, if you're able to offer any advice.

  9. Khang Minh
    Member
    Plugin Author

    Posted 4 months ago #

    Do you have Firebug installed? What happen if you inspect element with Firebug and make edit to stylesheet?

    Also right now your staging site seems to be broken for all browsers, I see links to bwp-minify are coming from http://ultra.backlinko.staging.wpengine.com and that domain doesn't seem to be accessible.

    Is your Site Address (home_url) http://ultra.backlinko.staging.wpengine.com?

  10. joneslloyd
    Member
    Posted 4 months ago #

    Hi,

    The staging site 100% works.

    The real site (not worth looking at for this problem) is http://backlinko.com

    The staging site is: http://backlinko.staging.wpengine.com

    When I make any edits (Firefox), the stylesheet appears - but before then, the site has no style.

    It works in every other browser.

    (Thanks!)

  11. Khang Minh
    Member
    Plugin Author

    Posted 4 months ago #

    Okay I managed to get to ultra.backlinko.staging.wpengine.com. Can you create a temporary admin account on that site for me? Credentials can be sent to contact(at)betterwp.net.

    Oh and by Firebug I mean Firefox's debug extension, since I'm assuming that you're using Firefox's default Inspect Element.

  12. joneslloyd
    Member
    Posted 4 months ago #

    Hi there,

    How strange!

    What's your email address? The site is very high traffic, so it definitely can't be activated on the live site (admin only sounds perfect).

    I will check with the site owner before creating you an admin account.

    Also, I was using "Inspect Element" yes. Sorry, I didn't get you there.

    Thanks a lot for your help so far - really appreciated.

    Cheers,
    Lloyd

  13. Khang Minh
    Member
    Plugin Author

    Posted 4 months ago #

    I managed to get to ultra.backlinko.staging.wpengine.com. Can you create a temporary admin account on staging for me? Credentials can be sent to contact(at)betterwp.net.

  14. joneslloyd
    Member
    Posted 4 months ago #

    Thanks - I've just sent them over.

  15. Khang Minh
    Member
    Plugin Author

    Posted 4 months ago #

    Hmm I wonder if the email is lost somewhere?

  16. joneslloyd
    Member
    Posted 4 months ago #

    Did you check your spam/junk folder?

  17. Khang Minh
    Member
    Plugin Author

    Posted 4 months ago #

    Pressing F5 like crazy now, maybe you can try: http://betterwp.net/contact/

  18. joneslloyd
    Member
    Posted 4 months ago #

    Okay I just sent via that page :)

  19. joneslloyd
    Member
    Posted 4 months ago #

    (I've also sent it via my gmail email address)

  20. Khang Minh
    Member
    Plugin Author

    Posted 4 months ago #

    Okay it should be working now.

    The offending CSS is wp-content/thesis/skins/classic/css.css. There are some CSS rules inside that file that is causing trouble if minified, so you must set it to be ignored.

    Not sure if this can help: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fbacklinko.staging.wpengine.com%2Fwp-content%2Fthesis%2Fskins%2Fclassic%2Fcss.css%3Fver%3D3.8.2

    If you still want to minify this file, try the following:
    1. Go to http://refresh-sf.com/yui/ and minify that css.css file manually. That site uses a different Minification mechanism so it might work.
    2. Replace the current css.css with css.min.css as generated by the website in step 1, and cross your fingers.

    I don't think you would gain much from minifying css.css because that file appears to be self-minifed for the most parts.

    I also noticed an issue with your site, jQuery is being used in header (echoed directly) but you force jquery.js to footer, that would cause JS error. You either need to wrap your JS codes in document ready function, or leave jquery in header (which I have done for you).

    And one last recommendation: don't minify and print separately a bunch of files like that, it would actually slow down your site rather than speeding it up. But I assume that you were doing that for testing purpose.

    Hope that helps.

  21. joneslloyd
    Member
    Posted 4 months ago #

    Wow!

    Thanks for the very detailed response there. Really, really appreciated :) Thank you.

    I will check out the offending CSS and see if I can get it working when minified.

    I will also sort out that jQuery.

    The separate printing of files was for testing purposes only, you're right. They'll all get recombined and printed as one, once I've fixed this.

    Thank you again!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.