Brendan Vogt Brendan Vogt - 6 months ago 15
Javascript Question

Bootstrap icons not displaying on initial load in Internet Explorer 8

I have a website that I am doing in my spare time. I am using it to display mountain bike events in South Africa. It is done in

ASP.NET MVC 5
and the latest version of
Bootstrap 3
.

I am catering for Internet Explorer 8 as well as Google Analytics is showing some activity for this browser. I have
Respond JS
included as well as
html5 shiv
.

On the top menu you will see a Home menu option. Next to it I have an icon of the house. When the website loads up for the first time in Internet Explorer 8 you will see that it does not display, it just displays a white block. When I hover over it or click on home it displays. Why is this? It works fine in Firefox and Google Chrome.

The website is on a shared host at Arvixe. I have noticed that when I run the website through Internet Information Services (IIS) with an application pool then the icon loads up fine. When I remove the application pool then it doesn't load up properly.

Answer

It's a bug in IE related to the :before and :after pseudo elements.

See this question for more information, suffice to say, there's a JS workaround. You may need to adapt it to your own particular case.

var head = document.getElementsByTagName('head')[0],
    style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.cssText = ':before,:after{content:none !important';
head.appendChild(style);
setTimeout(function(){
    head.removeChild(style);
}, 0);
Comments