On IE8, font disapear when refresh #954

Closed
FabGre opened this Issue Apr 15, 2013 · 45 comments

Projects

None yet
@FabGre
FabGre commented Apr 15, 2013

EDIT : Just see that there is an other bug about display on IE (#929) but I'm not sure it's the same 'cause the tweak seems to be on the source code..

Hello,

Sorry but I have to report a bug on IE 8 (argh). The users of my application are not experimented internet guys and could still use XP/IE 8 ..

So, I saw that when I simple refresh my app, fonts disapear randomly. I checked on fontAwesome website and it's the same, with a strange behaviour on hover. When I hard refresh (CRTL+R) or clear the cache, fonts come back. I let you see my different screenshots.

FA-bug-ie8

FA-bug-ie8-2

FA-bug-ie8-3

FA-bug-ie8-4

@tagliala
Member

Hi, we never experienced this issue with IE8. Did you check other machines? Can you please check FA 3.1.1 and let me know if everything is fine?

@tagliala
Member
tagliala commented Jun 6, 2013

closing, no feedback here

@tagliala tagliala closed this Jun 6, 2013
@andparsons

I found I also had this problem with IE8 on XP with 3.1.1.
When defining the icons via unicode () rather than by class, the problem didn't occur.

@ecowden
ecowden commented Jun 14, 2013

We can also confirm that this is an issue.

Here's a screen shot of the Font Awesome page as of Jun 14th, 2013, v3.2.0:

screen shot 2013-06-14 at 2 38 34 pm

@tagliala tagliala reopened this Jun 15, 2013
@tagliala
Member

reopening but since it's random, it's hard to reproduce by me

@FabGre
FabGre commented Jun 17, 2013

Sorry I had no time to answer before. We reproduce on every VM XP created on our machines (VM found here http://www.modern.ie/en-us/virtualization-tools)

@tagliala
Member

I will take another look. Anyway I'm also using a virtual machine

@tagliala
Member

confirm. Sometimes right click is enough to get icons back.

Are you able to reproduce it here: http://tagliala.github.io/vectoriconsroundup/

If yes, please check that other webicons are not working.

@tagliala
Member

Tried 20-25 times without any success. I suspect some javascript stuff (my roundup is not using jquery and there is a javascript error on IE8). Let me up to date

@FabGre
FabGre commented Jun 17, 2013

I reproduced the first time on http://tagliala.github.io/vectoriconsroundup/, only in the ELS column. Then all icons were alright when I refreshed (even when I deleted the cache files !). I tried ~10 times.

Hope it helps.

@ecowden
ecowden commented Jun 18, 2013

The icons on http://tagliala.github.io/vectoriconsroundup/ don't show up for me at all. Looks like the JavaScript errors probably have something to do with it, though.

screen shot 2013-06-18 at 9 56 43 am

@tagliala
Member

I could setup for sure a page without javascript

Anyway, since ELS and Glyphicons have nothing to do with FontAwesome, can we say that this is a browser bug?

Any IE8 guru here?

@tagliala
Member
tagliala commented Jul 5, 2013

any news about this one?

@fatcrobat

I can confirm this, as a workaround i downgraded font-awesome to Version 3.0.2.

@tagliala
Member

@fatcrobat there are no issues with 3.0.2 ?

@fatcrobat

none mentioned yet

@tagliala
Member

Even if I'm sometime able to reproduce this, today I tried several times (at least 50) on my roundup page and I wasn't able to reproduce. http://tagliala.github.io/vectoriconsroundup/

PS: if also glyphicons and elusive icons don't show, it isn't a fontawesome bug.

@shapeshifta78

Apparently, IE8 dislikes using webfonts in pseudoelements. I had the same issues with my own iconfont.
The only workaround I found so far is to trigger an invisible style change on these elements after the page has loaded. Sth. like this: http://stackoverflow.com/questions/9809351/ie8-css-font-face-fonts-only-working-for-before-content-on-over-and-sometimes

@nicodiaz

Hi,

I have the same issue. The downgrade to 3.x.x by @fatcrobat didn't work for me. Neither the JS on dom ready, proposed be @shapeshifta78

I don't post screenshots because are the same as the initial screens by @FabGre

I can reproduced the bug by refreshing many times (~10-15) IE8 with the following code (bootstrap 3.0.0 AF 4.x.x):

<html>
<head>

<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="/css/font-awesome.min.css" />

<script src="/js/vendor/jquery-1.10.1.min.js"></script>
<script src="/js/vendor/bootstrap.min.js"></script>


</head>
<body>
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <section>
                    <h2><i class="fa fa-wrench"></i>Wrench</h2>

                    <p>...</p>
                </section>
            </div> 
        </div> <!-- /ROW -->
    </div> <!-- /CONTAINER -->
    <script src="/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js" ></script>
</body>
</html>
@xzyfer
xzyfer commented Nov 14, 2013

Can confirm this happens in IE8 in the github page. Issue is not isolated to font awesome as I've experience this with my own icon font. Doesn't always happen. When it does, hovering over an icon generally makes it appear.

I believe it may be an issue with the browser not repainting once the icon font has been loaded.

@RKS213
RKS213 commented Nov 30, 2013

I don't get these issues with 3.x. I first tried 4.0 today and immediately see this issue. The FA website is completely broken using VM on Mac, IE8, Windows 7. It's all I tried.

@tagliala
Member

@RKS213 thanks for the extra information.

I'm testing IE8 only with windows xp and it works most of the times (there are random issues).

I don't know if IE8 should be also be supported on windows 7, since IE11 comes as an automatic update, I will ask Dave

@RKS213
RKS213 commented Nov 30, 2013

I didn't even know IE11 was out already...lol. By automatic update do you mean it forces users to update? Or there's still an option to decline at prompt? I don't support XP anymore, so if that's the only remaining issue than I can live with FA not support Win7/IE8 if they're being forced to update. Thanks for the information.

@cbirdsong

Fixed this by including a second @font-face declaration, as per the first answer here: http://stackoverflow.com/questions/9809351/ie8-css-font-face-fonts-only-working-for-before-content-on-over-and-sometimes

I have no idea why this works, but it does on all the sites I've tried it on.

@tagliala
Member

@cbirdsong thanks forma sharing but that solution is linked to a post saying:

UPDATE: The IE8 Icon Fonts Fix allow to display icons in IE8 (which is impossible with current icon.css file), butoccasionally the browser will not load the font (this happens especially when a page loads quickly, in the member menu, and sometimes in the administration pages). Seems to be a problem of IE8, but I hope it can be bypassed by the BoonEx team or any member of the community.

@charliematters

Is there any advice on this? I am using IE8 and have had no luck in getting icons to show ever. Testing on BrowserStack shows that the FontAwesome 3.2.1 webpage doesn't display any of the icons.

I have tried all of the fixes that Google turned up, including changing the MIME type, and adding the ?#iefix line to the font-face url.

@RKS213
RKS213 commented Mar 25, 2014

You cannot use the 4.0 version. You need to use 3. It sucks because not all the icons are on 3 but only 3 works with IE8 and below. There are a few things about 3 that are even better than 4 and I like the code better. I don’t know why he fundamentally changed his code for 4 and it sucks, but that’s what you have to do if you want to support IE8 and below.

On Mar 25, 2014, at 3:50 PM, charliematters notifications@github.com wrote:

Is there any advice on this? I am using IE8 and have had no luck in getting icons to show ever. Testing on BrowserStack shows that the FontAwesome 3.2.1 webpage doesn't display any of the icons.

I have tried all of the fixes that Google turned up, including changing the MIME type, and adding the ?#iefix line to the font-face url.


Reply to this email directly or view it on GitHub.

@charliematters

Sorry, perhaps I should have been more clear - I'd love to use 4, but I'm also perfectly happy with 3 (in Firefox and Chrome)!

FontAwesome 3.2.1 does not appear to support IE8 at all - unless I'm doing something very wrong?

@tagliala
Member

FA 3.x.x and 4.0.x work with IE8

IE8 has random problems with before tags, but this is not FontAwesome's fault and there is not a clean workaround we can use.

If you are not able to make FA work at all, please check your server configuration or use the cdn: http://fontawesome.io/get-started/

edit: please also take a look here: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

@charliematters

Thanks for the reply. Unfortunately I am developing for a system which does not have internet access. I will try and copy the files across again.

Does it mean anything that I cannot get the FontAwesome website (http://fortawesome.github.io/Font-Awesome/3.2.1/) to work using the IE8 VM mentioned above by FabGre ? The symptoms are identical i.e rectangular boxes wherever icons would be expected.

@charliematters

PS. I'll also try the troubleshooting methods you mentioned as well!

@tagliala
Member

@charliematters take a look here: #2324

Let me know if it helps

@charliematters

Thanks tagliala, that looks really useful and is exactly what I'm getting. The IE security settings sounds extremely likely!

@tagliala
Member

you're welcome. let me know if it fixes so I can improve the troubleshooting guide

@drKnoxy
drKnoxy commented May 20, 2014

bummer, hitting the same issue

@tagliala
Member

@drKnoxy can't fix this

@BBosman BBosman referenced this issue in twbs/bootstrap Jun 19, 2014
Closed

Glyphicon weirdness on IE8 #13863

@amitabhaghosh197

I was also having this problem with 4.1.0. Also applied all the css hacks and js to get solved. But without any hope. Ultimately I applied 3.2.1. and <!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]--> 

and finally it got solved.

@rjgotten
rjgotten commented Dec 3, 2014

Regarding the previous advice given by @shapeshifta78 :

Apparently, IE8 dislikes using webfonts in pseudoelements. I had the same issues with my own iconfont.
The only workaround I found so far is to trigger an invisible style change on these elements after the page has loaded.

IE8 has one more problem with pseudo-elements and rerunning layout and paint; it tends to skip doing so unless the content CSS property is changed.

Anyone that is still having issues with font icons not properly displaying after the font-face has finished loading, could try something that explicitly toggles the content property, like:

<style>
  html.ie-force-pseudo-refresh :before,
  html.ie-force-pseudo-refresh :after {
    content : none !important;
  }
</style>
<script>
  if ( window.attachEvent && !window.addEventListener ) { // <-- Poor man's IE8 detection
    window.attachEvent( "onload", function() {
      var
        html = document.documentElement,
        clss = html.className;

      html.className = clss + " ie-force-pseudo-refresh";
      setTimeout( function(){ html.className = clss; }, 10 );
    });
  }
</script>
@tagliala
Member
tagliala commented Dec 3, 2014

@rjgotten thanks, a link to your comment was added to troubleshooting guide

@amitabhaghosh197

Recently I got another fix for updated font awesome for ie8 . I added slectivizr.js and it worked for ie8

@tagliala
Member
tagliala commented Dec 3, 2014
@amitabhaghosh197

Yes, that is. It is perfectly working with all versions of Font Awesome. I have tested it.

@tagliala tagliala closed this Mar 19, 2015
@tagliala tagliala referenced this issue Mar 19, 2015
Closed

Document #954 #6002

@aallou
aallou commented Oct 29, 2015

This solution is ok for me :

Add font (glyphicons) in your css, although the bootstrap included :

@font-face {
font-family: 'Glyphicons Halflings';
src: url('......./bootstrap-3/fonts/glyphicons-halflings-regular.eot');
src: url('......../bootstrap-3/fonts/glyphicons-halflings-regular.eot?#iefix')
format('embedded-opentype'),
url('....../bootstrap-3/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('....../bootstrap-3/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('......../bootstrap-3/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular')
format('svg');
}

@rjgotten

This solution is ok for me

Only reason that this seems to work for you, is that including the font-face definition in an earlier location in your CSS in »this one specific occasion« only, causes the font to finish loading before IE's first crack at rendering the page.

Thus you avoid the issue with IE not repainting pseudo-elements, because they're already completely rendered as they should be on first paint.

However, you have absolutely zero control over all the timing conditions involved and thus zero guarantee that this will work correctly everywhere on all connections for everyone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment