Glyphicons blink on refresh in chrome

Profile picture for Timo002
Timo002

I'm using Bootstrap glyphicons. They are working nicely, but with Chrome browser, the glyphicons blink when the page loads

For example:

  1. Open this link on Bootstrap:
  • http://getbootstrap.com/components/#glyphicons-glyphs
  1. Once loaded, Press <kbd>F5</kbd> or refresh.
  2. You will see the glyphicons blink.

How can I fix it so they don't blink?

Here's a screenshot:

Example

Note: This only happens in Chrome, not FF or IE.

Generally, this is a problem with having a flash of unstyled content (FOUC).

Specifically, this is what Paul Irish calls a flash of unstyled text (FOUT):

In Firefox, basically the text is in a default webfont until the custom font is ready

FF

Webkit takes a very different approach, and very intentionally. They believe it’s better to keep the text invisible until the font is ready. This way, there is no moment where the text flashes into its newly upgraded self

Webkit

In other words, this issue isn't so easily overcome.

You can attempt to minimize the impact by:

  • Using gzip to shrink the file so it downloads quicker
  • Using caching so the client can use an existing copy rather than grabbing a new one.

The heavy handed approach would be to wait to display the page to the user until everything was rendered, but I would strongly recommend against this. User are very impatient for initial load times but are considerably more forgiving when it comes to rendering additional content.