All geek questions in one place

Glyphons flash when lit in chrome

I use Bootstrap glyphs. They work beautifully, but with the Chrome browser, the glyphics flash when the page loads.

For instance:

How can I fix this so that they do not blink?

Here's a screenshot :

Example

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

+6
source share
3 answers

This is usually a problem with the presence of a flash of loose content ( FOUC ) .

In particular, this is what Paul Ireland calls a flash of untrue text ( FOUT ) :

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

Ff

Webkit takes a very different approach and is very intentional. They think it's best to keep the text invisible until the font is ready. Thus, there is no moment when the text starts flashing in its updated self.

Webkit

In other words, this issue is not easy to overcome.

You can try to minimize the impact of:

  • Using gzip to compress a file so that it loads faster
  • Use caching so that the client can use an existing copy rather than grab a new one.

The hard approach was to wait for the page to be displayed to the user until everything was displayed, but I would highly recommend against this. The user is very intolerant of the initial loading times, but is much more forgiving when it comes to providing additional content.

+6
source

Glyphics flash / flicker when the page reloads, but the big problem for me (I use Bootstrap 3) is that the page flickers as the size of the elements around the glyphics resizes . Adding this to my CSS stopped resizing for me:

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

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

+2
source

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

This stopped the blinking of the icons immediately after Chrome now caches the font file correctly.

To find out if this applies to you, open the debug console in Chrome (F12) on the site where it is blinking, and you will find an error related to glyph fonts where the browser interprets them as the wrong MIME type.

+1
source

Source: https://habr.com/ru/post/976500/

More articles:


All Articles