Sage Sage - 16 days ago 7
CSS Question

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?

Answer

What you are seeing is a Flash of Unstyled Text. It happens when the text is shown on the screen before it's 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!