.topic-body background color loads after a delay

Product Support

AI-generated summary

The user riteshsaini reported a delay in loading the .topic-body background color after a page reload, causing a poor UX. Don explained that the issue stems from the default CSS @keyframes animation transitioning from var(--tertiary-low) to transparent, which causes a flicker when the background is not white. To fix this, Don provided a solution by overriding the default keyframe or creating a custom one to transition directly to #fff, ensuring a smooth background color load. The solution was implemented successfully, and riteshsaini thanked Don for the detailed help. maiki moved the topic to Product Support and suggested marking Don’s answer as the solution.

1

Hi,

I’m using a dark background with white .topic-body for contrast.

This is the CSS I’m using:

html {
    background-color: #F5F5F5;
}
.topic-body {
    background-color: #fff;
}

But whenever the site is reloaded, first the HTML background-color shows up, then the .topic-body background color loads.

It’s bad for UX.

Is there any way to prioritize .topic-body background color to load first?

Or is there any other way to do it?

This is the final result I wanted and got:

6897e8f9-70a2-4469-9af0-45a5de0003ff
6897e8f9-70a2-4469-9af0-45a5de0003ff1098×657 73.2 KB

2

Hello, You have to override the keyframes or create a new one.
Something like this will change the animation transition colors.

The default keyframe is :arrow_down_small:

@keyframes background-fade-highlight {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: transparent;
  }
}

This means it highlight from var(--tertiary-low) to transparent. Which is cool because Discourse default background color is white and topic body has no background, so transparent will be white but in your situation the problem is the background is different so it goes first to transparent and after a little delay it will be #fff (the background color you seted up to topic-body).

So you have to change the transparent to make it smooth color transition. You can override the default but maybe better if you create a new keyframes.

Note: If you override the default keyframe it will change everywhere where Discourse using it not just on topic-body. :arrow_down_small:

This will override the default keyframes.

@keyframes background-fade-highlight {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

If you want to create a new keyframes :arrow_down_small:

// Custom keyframes
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

And add this keyframe to the topic body.

.topic-body {
  background-color: #fff;
  &.highlighted {
    animation: background-fade-highlight-custom 2.5s ease-out;
  }
}

The full code looks something like this. :arrow_down_small:

body {
  background-color: #F5F5F5;
}

.topic-body {
  background-color: #fff;
  &.highlighted {
    animation: background-fade-highlight-custom 2.5s ease-out;
  }
}

// Custom keyframes
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

Before

After

3

It works perfectly!

Thank you @Don

It must have taken some time to write this thorough solution. I appreciate the help and support.

Have a great day/evening :slight_smile:

4

Hi @riteshsaini. :wave:

I moved this topic to Support, so you can mark @Don’s great answer as the solution. :slight_smile: