Styles not applied to previously used components of other pages #571

wallythewebdev · 2023-01-04T08:44:12Z

wallythewebdev
Jan 4, 2023

This might just be a symptom of something else that is going on

When SWUP transitions to a new page, some of the specific styles that need to be applied to components that existed in a previous page do not have their new styles applied:

Example - on the home page I have a couple of featured websites -

When I transition to the website page - where these components are used again the new styles applied to them are not being used:

If I reload the page then the correct styles are applied -

It might be worth noting that the CSS styles being used for these two components are different - on the home page it uses flex and on the transition to page it uses grid I cannot image this might be an issue but worth noting.

This is also happening in other places such as the header were page specific css is being applied. My gut feeling says that this is a caching issue. Any thoughts?

Context and environment

I am running a website using a CMS (Craft CMS)

I am using the JS CND to load SWUP in the footer of my website

I have wrapped my page in a div that applies the SWUP transition - the CSS is in the head of the page outside of this div

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {# Fav Icon #}
    {% set favIcon =  favIcon.img.one() %}
    {% if favIcon %}
        <link rel="shortcut icon" href="{{ favIcon.url }}" type="image/x-icon">
    {% endif %}

    {# SEO content #}
    {% include "_includes/base/seo.twig" %}

    {# IF is blog post #}
    {% if "post" in url %}
      	<link href="/ASSETS/CSS/VENDORS/prism.css" rel="stylesheet"/>
    {% endif %}
    

    {# Previous #}
    <link rel="stylesheet" href="/ASSETS/CSS/main.min.css">

    {# Tailwind #}
    {# <link rel="stylesheet" href="/ASSETS/CSS/tailwind_output.css"> #}
</head>

<body class="reliative bg-slate-400 {{ url }} {{ headerColor|default('') }}">
    <div id="swup" class="transition-fade">
    {% include "_includes/base/nav.twig" %}
      {% if url != "" %}
        {% include "_includes/base/sub-header.twig" with {url} %}
      {% else %}
        {% include "_includes/base/header.twig" %}
      {% endif %}
      <main>
          {% block content %}{% endblock %}
      </main>
    </div>
    {% include "_includes/base/footer" %}
    {% include "_includes/base/scripts" %} <<< Imports the SWUP CDN file here
</body>
</html>

I did try to destroy the page cache using the SWUP API but this did not work:

const swup = new Swup();

swup.on('willReplaceContent', function() {
  swup.cache.empty();
});

Any thoughts would be great - thanks

Answered by daun

Jan 4, 2023

Update: the Head Plugin now supports waiting for new stylesheets to load before showing the next page.

Previous answer for swup 2:

Swup doesn't automatically update the head tags, so your new stylesheets won't be loaded. The head plugin will update the tags for you and add the new stylesheets, but it won't wait for the stylesheets to load before showing the new page. So the best option is to use a single stylesheet for the whole page to avoid the flash of unstyled content.

View full answer

daun · 2023-01-04T10:55:17Z

daun
Jan 4, 2023
Maintainer

Update: the Head Plugin now supports waiting for new stylesheets to load before showing the next page.

Previous answer for swup 2:

Swup doesn't automatically update the head tags, so your new stylesheets won't be loaded. The head plugin will update the tags for you and add the new stylesheets, but it won't wait for the stylesheets to load before showing the new page. So the best option is to use a single stylesheet for the whole page to avoid the flash of unstyled content.

4 replies

wallythewebdev Jan 4, 2023
Author

Ok great thanks I will try that - but I don't know if that is what is happening as the site does use one CSS style sheet for the whole website? Is there any other suggestions?

however, In some cases the URL dictates what classes should be added to the page (this is because the site is split into - a base layout - which content is then added to).

daun Jan 4, 2023
Maintainer

Maybe it has to do with caching if your site sets classes depending on the URL. Try disabling the cache and see if that helps.

daun Jan 4, 2023
Maintainer

Seeing that you're using classes on the body to apply the grid styles, you'll need the body class plugin to make that work.

wallythewebdev Jan 4, 2023
Author

Cool so by default my dev mode has cache disabled :) But I did notice that there is a class that is applied to the body by the url of the site. I moved the id to the body tag which is also causing an issue as the URL now doesn't change at all.

Just saw your comment - will give the body class plugin a go - thanks

hirasso · 2023-01-04T11:37:40Z

hirasso
Jan 4, 2023
Maintainer

@wallythewebdev would you mind creating a reduced test case of your issue by forking our template over at CodeSandbox?

That way we will know exactly what your issue is.

1 reply

wallythewebdev Jan 4, 2023
Author

hi @hirasso - Thanks for your reply. Prior to me doing so, do you have any suggestions of what might be causing this issue based on my above description and that the site is using one style sheet already (please also feel free to ask any other questions you might have) - The reason I ask this is while I understand the need to replicate this issue in a controlled environment, it doesn't detract that this is an issue in my current environment. I wonder if this is due to templating?

Thanks again - W

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

swup

Styles not applied to previously used components of other pages #571

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 5 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

swup

Styles not applied to previously used components of other pages #571

Uh oh!

Uh oh!

wallythewebdev Jan 4, 2023

Replies: 2 comments · 5 replies

Uh oh!

Uh oh!

daun Jan 4, 2023 Maintainer

Uh oh!

wallythewebdev Jan 4, 2023 Author

Uh oh!

daun Jan 4, 2023 Maintainer

Uh oh!

daun Jan 4, 2023 Maintainer

Uh oh!

wallythewebdev Jan 4, 2023 Author

Uh oh!

hirasso Jan 4, 2023 Maintainer

Uh oh!

wallythewebdev Jan 4, 2023 Author

wallythewebdev
Jan 4, 2023

Replies: 2 comments 5 replies

daun
Jan 4, 2023
Maintainer

wallythewebdev Jan 4, 2023
Author

daun Jan 4, 2023
Maintainer

daun Jan 4, 2023
Maintainer

wallythewebdev Jan 4, 2023
Author

hirasso
Jan 4, 2023
Maintainer

wallythewebdev Jan 4, 2023
Author