Glyphicons blink on refresh in chrome

Question

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
2. Once loaded, Press F5 or refresh.
3. You will see the glyphicons blink.

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

Here's a screenshot:

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

Answer 1

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

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

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.

Answer 2

The glyphicons blink/flicker on page reloads, but the bigger problem for me (I'm using Bootstrap 3) is that the page flickers as elements resize around the glyphicons. Adding this to my CSS stopped the resizing for me:

.glyphicon {
    width: 14px;
    height: 14px;
}

Thanks to my source: https://www.garysieling.com/blog/preventing-icon-flicker-using-glyphicons

Answer 3

I had exactly the same problem but solved it by adding .woff and .woff2 as new MIME-types font/x-woff in IIS.

This stopped the glyph-icons from blinking immediately as Chrome now caches the font-file correctly.

To see if this may apply to you, open the debug-console in Chrome (F12) on the site it blinks and you will find an error related to the glyph-font-files where the browser interprets them as the wrong MIME type.