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 1 year ago.
- AuthorPosts
- March 4, 2022 at 10:38 pm #37022
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.
March 5, 2022 at 1:39 pm #37026Hi,
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.pngWith 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 :)
March 5, 2022 at 6:39 pm #37032You cannot access this content.March 5, 2022 at 6:40 pm #37033I am currently running with those compatibility settings.
March 6, 2022 at 10:51 am #37034Thank 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.
Best,Attachments:
You must be logged in to view attached files.
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
March 7, 2022 at 3:13 am #37043interesting. 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.March 7, 2022 at 7:41 am #37052Are 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.
Best,Attachments:
You must be logged in to view attached files.
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
March 8, 2022 at 6:27 pm #37111My 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.
March 8, 2022 at 6:28 pm #37112my attachment got removed
Attachments:
You must be logged in to view attached files.March 9, 2022 at 10:40 am #37120I 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 :)
March 10, 2022 at 11:23 pm #37137You cannot access this content.March 11, 2022 at 5:57 pm #37148I 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 versionThe 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.March 14, 2022 at 3:49 pm #37160Thank 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 :)
March 14, 2022 at 5:28 pm #37166This seems to fix it! Yay!
March 15, 2022 at 10:14 am #37174That 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 :)
- AuthorPosts
You must be logged in to reply to this topic.