CSS Styles Missing After Seamless Page Load (SmoothState.js)

[jessebrito]

Hello,

I am adding seamless page transition to my website by using SmoothState.js which I have installed by following this tutorial in a Pro child theme. The seamless page transition works but for some reason some CSS styling are missing on the page. Sometimes it will load the styles correctly after it has been visited a second time, after the first page load.

How can I ensure the CSS added by X Theme Pro loads correctly after the seamless page transition?

I’m running WordPress 5.4.2 and Pro 3.2.3.

If anyone can shed some light or point me in the right direction, that’d be great. Thank you!

[friech]

Hi @jessebrito,

Thank you for writing in, it could be a caching or optimizer related issue or a plugin conflict. Please clear all your caching and optimizer features (plugin, server-side, CDN, and browser’s cache).

If the issue persists, please do a Testing for Plugin Conflict.

Cheers!

[jessebrito]

Hello @friech,

Thank you so much for your response!

I deactivated all my plugins and it is still causing the issue. As part of the SmoothState implementation, it requires a container right after the body tag. I have tried to use both #x-root and adding my own div. Since SmoothState requires all links and forms live inside this container for updating the content via ajax, I believe some scripts are not being loaded.

I have a feeling X Theme Pro may just not be compatible, but it’s halfway working. If only it loads the CSS!

[ruenel]

Hello @jessebrito,

Please be advised that the #x-root is the global container for the header, content area and the footer. If you only want to use the content area, you will need to add your own div as the container for the content area. For best results, we highly suggest that you contact the creator of SmoothState script for further assistance.

Note: his particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.

Thank you for your understanding.