CSS not rendering correctly on first view

Home Forums Product Support Forums Ajax Search Pro for WordPress Support CSS not rendering correctly on first view

This topic contains 14 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 2 years ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #37022
    futileboy
    futileboy
    Participant

    Hello we are experience a conflict with the Cornerstone Pro theme. The issue occurs when the first time someone visits a page after it has been modified the CSS isn’t loading correctly. It does correct after refreshing. And this is just the first person to view the page the first time. After visiting it loads correctly for others. I can reproduce this by either editing a page or clearing the style cache. I’ve seen other topics cover a similar issue but in those cases everyone is using either a CDN or site caching. On our development environment we have all of that disabled and are still seeing this behavior.

    I’ve tried modifying the settings to every possible option but it resulted in the same issue.

    #37026
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    Can you please add a relevant URL where I can check this?

    Is the styling completely missing on the initial page view? Or it does not load in time?
    First, check the compatibility option panel, so the configuraiton set like this: https://i.imgur.com/Q3dSE36.png

    With that configuration, the CSS is simply enqueued as it should be, WordPress takes care of the rest. Usually unrendered styling is related to some level of cache – or something else is tempering with it. What you described is a typical cache behaviour. The theme or another plugin may have some sort of a CSS minify/compile feature, and it probably takes the initial page load to trigger it.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #37032
    futileboy
    futileboy
    Participant
    You cannot access this content.
    #37033
    futileboy
    futileboy
    Participant

    I am currently running with those compatibility settings.

    #37034
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Thank you!

    I visited the page, and everything was all right. There stylesheets are all rendered correctly on my end, everything is enqeued as it should be – including the plugin styles. I see no errors on the error console either, the plugin is not present on the page, no scripts are executed either.

    Attachments:
    You must be logged in to view attached files.
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #37043
    futileboy
    futileboy
    Participant

    interesting. I’ve attached what is the behavior I’m seeing when I visit a page for the first time. The CSS only partially loads and then if I refresh I get the full CSS. Then any subsequent views to the page will render correctly for myself any anyone else. It seems to be much worse for our users on Safari which seems to hold on to client side cache of page a bit more aggressively.

    Attachments:
    You must be logged in to view attached files.
    #37052
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Are you sure that it is the CSS? That looks like as if some further rendering might be missing – it could be loading script issue too. Check the javascript console whenever the page loads incorrectly, I have a feeling there might be some errors there explaining the problem.

    One last thing you may want to check, if the scripts loading method is set to the defaults (see screenshot). Although that has no impact on script execution, but I can imagine some sort of a 3rd party asset causing a conflict with it.

    Attachments:
    You must be logged in to view attached files.
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #37111
    futileboy
    futileboy
    Participant

    My settings already match what you have shown above.

    I’ve attached the console log. This is the only thing in the console log before and after.

    The one thing I did find that, at least for me, using Chrome in incognito mode never gets past the broken render view of the page even after refreshing, forcing to clear the cache, or visiting the page in another browser. If I view it first while in incognito mode I can’t get the correct result. Same sort of behavior I’ve seen in Safari. Still though if I view the page first in normal Chrome and refresh the page it looks fine in those browsers.

    It does seem like I am unable to totally disable caching on my hosting provider WP Engine. And if I clear the cache on the server side it fixes the issue for just the page that has been viewed. Same can be done by adding a cache buster to the URL like “?foo=bar”

    Still though if I deactivate the Ajax Search Pro plugin this issue goes away.

    #37112
    futileboy
    futileboy
    Participant

    my attachment got removed

    Attachments:
    You must be logged in to view attached files.
    #37120
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    I have absolutely no clue why is this happening, I have never seen anything like this before.

    If you want I can try to go through the plugin line-by-line to see if at any point of execution triggers anything. For that however I need back-end access to clear the cache, and (s)FTP access to make direct modifications to the plugin quickly.

    I can only assume, that something somewhere triggers something else in a different code, but no error messages, nothing whatsoever.

    However first try turning off all the other plugins to see if anything changes. If not, then switching the theme. That narrows down the issue to either a specific plugin or the theme, and it might be easier for me to cross check.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #37137
    futileboy
    futileboy
    Participant
    You cannot access this content.
    #37148
    futileboy
    futileboy
    Participant

    I had someone else on our team take a look and this is something that they found which hopefully is helpful:
    “I can see the HTML is actually different between the working version and the broken version

    The working version has a lot of utility classes that don’t mean anything to me “mjm-3q mjm-3r mjm-3s mjm-3t” BUT it is those utility classes that get the CSS to where it needs to go. The styles seem to be in there, but they aren’t being engaged because they are cascading from some of those utility classes.

    The HTML is present in the raw source, not added with javascript, so this looks like a server issue, and the way it sort of hangs out and then disappears makes it looks like a transient server issue which gets cached first broken then fixed.”

    Attachments:
    You must be logged in to view attached files.
    #37160
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Thank you for all the details, it helped a lot!

    I think I found the conflict. I am not entirely sure what the exact line of cause is, but I narrowed it down to this option on the Index Table options panel: https://i.imgur.com/3pBwZQY.png

    I assume, that maybe this triggers the indexing too many times, and some programmatical hooks might be left deregistered afterwards, or the function terminates at some point, and then on the next pageview it finally executes.

    Anyways, I have left that setting deactivated, can you please confirm, if that fixed it?

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #37166
    futileboy
    futileboy
    Participant

    This seems to fix it! Yay!

    #37174
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    That is great 🙂 I will make a few tests on this feature, maybe there is something we can improve to prevent this issue in the future.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.