Glyphicon weirdness on IE8 #13863

Closed
BBosman opened this Issue Jun 19, 2014 · 2 comments

Projects

None yet

3 participants

@BBosman
Contributor
BBosman commented Jun 19, 2014

I've been seeing some weird behavior when using Glyphicons (or any other font-face) on IE8. If the page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads.

I did some research and it appears I'm not the only one.

Apparently IE8 doesn't want to play nice when you use @font-face and :before together.

So far I've had some success fixing it with a bit of custom JavaScript I got from the Stack Overflow answers and wrapping that in <!--[if IE 8 ]><script></script><![endif]-->:

$(document).ready(function() {
  var $style;
  $style = $('<style type="text/css">:before,:after{content:none !important}</style>');
  $('head').append($style);
  return setTimeout((function() {
    return $style.remove();
  }), 0);
});

I don't know if that's the ideal fix (or that it fixes it in all circumstances), but putting at least a call-out in the docs making people aware of the issue in general would be a good idea imho.

@mdo
Member
mdo commented Jun 19, 2014

Crazy.

I don't know that we need to document this just yet—I haven't had any problems myself, and no one's really complained here about it. And, more importantly, v4 will drop IE8 support.

@cvrebert cvrebert added css docs labels Jun 19, 2014
@mdo
Member
mdo commented Jun 20, 2014

Closing per #13866.

@mdo mdo closed this Jun 20, 2014
@cvrebert cvrebert locked and limited conversation to collaborators Nov 17, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.