Refresh head before swup containers ?

[legagneur-matthieu]

Hi,
When I use the head plugin the CSS is broken a few moment after the transition, and it's fix when the CSS file is load.

it's posible to refrech the head before swup containers ?

Thanks, and sorry for my bad english.

[gmrchk]

Hi, it wouldn't be right to replace head content ahead of time, as some styles from the previous page could be removed before it's needed for example.

I would recommend to include the styles for all the pages everywhere if you can, but I get why you want to avoid it. Maybe including styles for layout only in a separate file on all pages?

This native prefetch sounds like it could be useful here, but I'm not sure about support or if it would help.

[CodersRage]

Hello Sir,
I am facing the same problem, plus I am a beginner web designer so, after the update of swup from ver 2 to 3 i am facing swup initializing issue and the one as mentioned above due which i am extremely sad and need your help.

[gmrchk]

I believe this should be handled in v3 and the new version of plugin, but @daun should know more details on that.

[daun]

Yes, from swup 3 onwards, the head plugin supports waiting for stylesheets to load before transitioning to the new page.

[CodersRage]

Thanks for the reply sir,
as I mentioned before I am swup 3 initialization issues, swup 2 initiates without any problems but ver 3 only seems to work ok with the swup cdn link, if I try using it from dist. folder there are multiple swup files as swup.cjs, swup modern.cjs and swup umd.cjs but none of them seems to initialize easily as in swup 2.

[CodersRage]

Plus about the css load and swap with each transition, Things are fine but what concerns me is a small milliseconds flash of css load which seems to occur mostly after 4-5 clicks/transitions from one link to another.

[CodersRage]

Plus, can you please share the code to add multiple plugins to swup as I am trying but guessing that I am doing mistakes.

[CodersRage]

swup.test.mp4

[CodersRage]

1): You can clearly see the flash at 4-6 click which becomes sort of persistent afterwards.
2): As showed the console is giving a message of transition duration missing for element of transition-selector but in my CSS I have defined it.
3): in the script.js I have put some code under comments as I failed to execute and it is about the preload plugin as somehow I thought it could fix the flash issue but can't get it to work
4): If pause and watch the html you may see that I am using cdn swup links instead of the downloaded package. Its because it is not initializing in the first place.
5): Last but not least, you can see the font size sort of growing after each transition which seems like an animation but no, its not, in my opinion, its basically the restoration of defined font size after the CSS is being loaded which sort of demonstrates the swap delay.

[daun]

@CodersRage Please create a new discussion on the swup repo; that way other users can offer advice about your setup. If you think you've found an actual bug, feel free to create a separate issue with a reproducible teast case.

[CodersRage]

ok sir

[CodersRage]

but how can i post that reproducable file?

[daun]

@CodersRage you can use and fork this CodeSandbox template: swup-test-case-template