Minified CSS replaces CSS entity with HTML tag?

  • Resolved Fox Lee

    (@fox-lee)


    4 years, 3 months ago

    First of all, let me say how grateful I am that I can use LiteSpeed cache on most of my client’s sites. I consider this plugin invaluable and without a doubt the highest standard for WP caching I have tried.

    One small problem I’ve had is what one client described as a “momentary flash of vertical text while loading”. It took me quite some time to work out what was happening, but today I finally tracked it down to an issue with the auto-generated critical CSS; a ::before pseudo-element has a character specified using a CSS entity code, which is partially(?) being replaced with HTML in the critical CSS. The HTML doesn’t render as the expected character (it looks malformed to me), causing a moment before the async CSS loads where the extra characters are displayed instead.

    This screenshot shows a comparison between the source (as loaded asynchronously) and the inline critical CSS. You can see the correct value, CSS entity \00a0, in the async section at the top (though disabled in my screenshot because I was testing), and the erroneous value <meta charset="UTF-8" />a0, in the inline section below.

    Alternatively this might be a HTML optimisation issue? I don’t know whether it’s happening when the critical CSS is generated, or during HTML optimisation. I do know that turning off HTML minification doesn’t help.

    I’m putting a workaround in place for now, but it would be good to know if this is something in the plugin that could be addressed. Thanks! 🙂

    NB: I haven’t supplied the URL due to client privacy. I’m happy to open a private support ticket if you need me to provide more information or link the actual site.

    • This topic was modified 4 years, 3 months ago by Fox Lee. Reason: typos
Viewing 5 replies - 1 through 5 (of 5 total)
  • tenkstars

    (@tenkstars)

    4 years, 3 months ago

    Hi,

    This is known as the FOUC issue and the way to solve it is to turn off Generate Critical CSS in the Background. Evidently, you’re still using V3.6.4 of our plugin. FOUC is no longer an issue in the latest version and the “Generate Critical CSS in the Background” option is already deprecated. I’d encourage you to upgrade your plugin to the latest version. Official release is v4.1, and the GitHub dev commit is V4.2-rc3.

    Regards.

    Thread Starter Fox Lee

    (@fox-lee)

    4 years, 3 months ago

    Thanks for your help. I wonder why I have an outdated version when I have auto-update turned on, and why WordPress isn’t offering me the update either? I’d hope that would prevent exactly this kind of issue :\

    Could you link me to that newer version? (Or just for the project’s GitHub page I guess, I’m sure I can find it myself from there).

    Thread Starter Fox Lee

    (@fox-lee)

    4 years, 3 months ago

    Ah, I see, I’ve read the pinned 4.1 announcement and I understand what’s going on there now. Nevermind! In any case, it seems that disabling the background generation prevents the issue due to preventing the flash in general, so that’s good enough for practical purposes. Thanks!

    Felix

    (@flexes)

    4 years, 2 months ago

    Hi,
    I have exactly the same issue. I am using the latest version of the plugin (V4.3):

    The critical CSS looks like this: 

    .col-full:before, .col-full:after {
            content: "
            
        <meta charset="UTF-8"/>
        20";display:block;height:

    How can I solve this problem?

    Thread Starter Fox Lee

    (@fox-lee)

    4 years, 2 months ago

    Felix, the solution given above (turn off “Generate Critical CSS in the Background”) worked for me. It doesn’t change the weird character generation, but it does stop the erroneously generated html from ever being visible, so in practical terms it’s a fine solution.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Minified CSS replaces CSS entity with HTML tag?’ is closed to new replies.