Unreplicable ie11 css/font loading bug

Question

I've been working on a website that was made with Drupal. The site has a blog section that has been made in Hubspot. (I don't think that matters too much, it's just to note that the normal site and the blog are seperated).

I've tested the blog section (http://blog.aurelium.be/) in google chrome, safari, firefox and ie11 on a virtual machine (I work on a mac). Now the issue seems to be that the client has a problem in ie11 that we can't recreate. The font and Icons and some item positioning aren't coming through correctly.

I've had a couple of people here at work test it but here it all looks the way it should.

How it should look:

And how it looks to the client (don't mind the missing blog items, that's normal). As you can see the social media icons, the font in the sidebar and part of the navigation aren't being shown how they should be shown:

The only difference I can think of is the fact that they're somewhere else, so maybe their wifi or something is bad, causing css not to load. I'm just taking wild guesses because on my end everything looks fine. (I haven't been able to test it at their location or on a real windows machine). My biggest guess would be a css loading issue of some sort.

Any help would be appreciated :)

How are you defining the @font-face rules? PS, I had this problem before and I do not recall how I fixed it, one way was to define the font-face rule better, the other was changing the character set used for fonts, the last was check the output css, I did something offensive to IE11 that it stopped rendering the rest of the css, thus ignored icons and few other things... PS I use MS Edge, and your blog looks fine there — Ayyash, Oct 29 '16 at 07:24

g.annunziata · Answer 1 · 2016-10-27T07:47:11.350

The problem appears related to external font loading (I guess on external cdn source). In detail, if browser layout positioning came before load font, you'll see the second layout using default internal font, with different space and bad result.
The only hint I can say is to to force whitespace: white-space: nowrap on button's box/div container or use position: absolute and explicit positioning, with position: relative on container div.

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

Could be related to the client's security settings for IE11 - they may have font downloads disabled. Tell them to make sure that is enabled before you start pulling out your hair over this - under Security Settings go to Downloads, and make sure Font Downloads is enabled.

See https://stackoverflow.com/a/30174845/5040893

edited May 23 '17 at 10:32

Community

1
1

answered Oct 28 '16 at 13:50

YamiTenshi

166
3

score 1 · Answer 3 · answered Oct 30 '16 at 05:48

Since you think it's a issue with the actual downloading of the css and font file, have you attempted to have your client use a web request debugging tool like Fiddler? We on rare occasions ask our customers to install it and send us back the log (often saves us from sending a developer out there).

That trace should at least show you if the css file is being requested and if it is succeeding. I think that would be your fastest next step.

One annoying setting in IE specifically is the security zone setting (Internet options -> Security tab). Depending on the level this security setting is at, IE could not even be attempting the request since the url of those files on the CDN aren't from the service hostname that the user requested. This should also be apparent if those urls aren't found in Fiddler.

To work around this, you could have your clients add specific urls to allow through IE but better option is if your original request to the cdn fails, just do a secondary request to a file on your server.

Hope it's one of those!

Did this get you closer to solving your problem? – k2snowman69 Nov 03 '16 at 21:28 — k2snowman69, Nov 03 '16 at 21:28

score 1 · Answer 4 · edited Oct 31 '16 at 02:51

This looks like font problems. If you look at this class definition:

.main-navigation .main-menu ul li a {
    padding: 20px 10px 15px !important;
    color: white;
    display: block;
    font-family: 'Oswald',sans-serif;
    font-weight: normal;
    width: 100%;
    max-width: 100%;
    font-size: 24px;
}

You can see that the only thing not being loaded properly are the fonts. Check the security settings.

If this is a government agency, I have experienced their security protocols not allowing any external fonts. You may need to define specific alternate fonts and sizes for ie11. Not that the browser is incapable of handling this, but I believe your clients in particular are not able to handle this with their security settings.

For debugging and replication purposes I was able to replicate many of your issues by stripping the site of all fonts: Site

Unreplicable ie11 css/font loading bug

4 Answers4