Sage
Sage

Reputation: 200

CSS: Page 'Jumps' when visited or reloaded

I built a site in Drupal 8 (but I think this is a CSS question).

The page 'jumps' when you reload the page. It also does this when you first visit but you can see it better if you hit 'f5'. I tried removing the logo to see if that was causing the problem, but it wasn't...the page still 'jumps'.

It looks like the big, rust-colored navigation bar at the top moves to the left when it reloads and then re-positions itself to where it's 'supposed' to be.

Anyone have an idea what might be going on here?

Upvotes: 0

Views: 58

Answers (1)

spencer.sm
spencer.sm

Reputation: 20614

What you are seeing is a Flash of Unstyled Text. It happens when the text is shown on the screen before its fonts are loaded. When the fonts finish loading, the text jumps into a new position.

See this article for a number different techniques to combat it!

Upvotes: 1

Related Questions