Forum Replies Created

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter gerald79

    (@gerald79)

    Hey, thanks for the follow up!

    I’m afraid I didn’t. From my tests, I wasn’t able to find the right piece of CSS to add to the “Inline and Defer CSS” option. So I tried to find a way to “manually” re-trigger the script after the full CSS has loaded, with no luck either.

    I’ll post if I find a solution. Thanks!

    Thread Starter gerald79

    (@gerald79)

    this _probably_ means that the JS you mentioned somehow depends on CSS being present at (before) document load

    Yes, that is it. From that JS plugin documentation, we have that:

    Since this css-element-queries polyfill adds new element attributes on the DOM element (<div class=”widget-name” min-width=”400px 700px”></div>) depending on your actual CSS (…)

    and

    Parse all available CSS and attach the polyfill to those elements which have rules attached (…) make sure this is called after ‘load’ event, because CSS files are not ready when domReady is fired

    in that case you’ll have to identify what specifically that JS-file is looking for in the CSS and add that to the “above the fold”-CSS?

    Not sure to understand what you mean… the JS file somehow looks the CSS to find the width of DOM elements with a given CSS class. Is that CSS class what I should add to the “Inline and Defer CSS?” textarea? If so… should I add all the CSS rules inside that class? Event child classes that depend on the main one with the attribute? Something like: .css-class[min-width~=”600″]{…}.css-class[min-width~=”600″] .css-child-class{…} …?

    Thanks!

    Thread Starter gerald79

    (@gerald79)

    I did check disabling the HTML and JS optimizations and yes, same results. Only deactivating that setting I get that attribute intact.

    Regarding other optimization plugins, just “a3 Lazy Load” and “WP Optimize”, but I think those have no effect. Tried deactivating them and still the same issue. In fact, I tried deactivating all the plugins but AO and still the same happens.

    I have also tried different combinations regarding CSS optimization and the only one causing issues on my end is that one “Inline and defer CSS?”

    The reproducing results are in; the min-width=”600″ is not removed on my local machine.

    Did you use the javascript plugin I mentioned? I mean, the attribute is not added via HTML… is not on the HTML markup served by the server, but added later on via javascript. Not sure when, I guess on document load, but don’t know for sure.

    Any suggestion about anything I should/could try?

    Thanks!

    Thread Starter gerald79

    (@gerald79)

    Hi Frank, thanks for answering!

    the attribute being removed is ‘min-width=”600″‘, which is added to a <div> element. That attribute is added by a javascript called “css-element-queries“.

    First I thought it should be something about deferring the script or making it load into the footer… or anything regarding the JS file. But it is not. The only setting that is affecting here seems to be the “Inline and defer CSS?” If I deactivate it leaving all others as they are, the attribute doesn’t get removed. From you explanation, it is seems like this option should affect at all… but it seems to be affecting somehow :$

    Here you have a screenshot of the settings configured: https://i.paste.pics/ddeae68ac02c474d7decf1763291481e.png

    Thanks for looking into this, Frank!

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