3

I have a quite specific IE9 problem that relates to this for example (but here it only refers to IE8 and less) IE8 web font iframe bug workarounds

I have pages that have iFrames inside iframes like so

Top page
 -- iframe1.html
 -- -- iframe2.html
 -- -- -- iframe3.html

The iframe 2 is loaded by iframe1 dynamically. I also have a fonts.css style sheet that has fonts encoded in this way: 

src:url(data:font/opentype;base64, /*FONT HERE */

that is located next to iframe1's folder in 

/%folder_with_top_page%/%folder with iframe1.html%/style/fonts.css

iframe2.html loads the fonts.css file from that folder:

<link rel="stylesheet" type="text/css" href="../style/fonts.css" />

And this works with other browsers just fine, except in IE9 the result is following:

page loads
page flashes with correct fonts
page reverts to New Times Roman/default serif font

Looking at the Network tab in dev tools in IE9 it shows that the browser is trying to load the fonts file from the root folder:

404 %folder_with_top_page%/style/fonts.css

Everything works just fine if I also place the fonts.css file there, but that seems unnecessary. There is also a file called fonts.css in %folder_with_iframe3.html%/style/fonts.css, which loads fine and seems to relate to the problem described in the first link, but I assumed the problem was fixed in >IE9? I know that the page structure isn't optimal in any case, but it's not up to me to change it.

My questions are as follows:

1) Is this the same problem as described in the link I posted but in IE9 instead? 2) Which would be the workaround that makes the most sense: just inserting the fonts file to the "correct" (= wrong, root-ish) folder, putting the fonts.css file to the same level as the file thats loading it (aka copying the file to %folder_with_iframe2.html%/style/fonts.css) or something else (such as appending the CSS again to the page with jQuery after the site has loaded).

The behaviour only happens with iframes but not when loading the pages individually.

Community
  • 1
  • 1
Pete TNT
  • 8,293
  • 4
  • 36
  • 45

1 Answers1

-1

I just stumbled on this post while diagnosing a similar issue with an embedded iframe trying to load a stylesheet with a relative link, and the request going to the outer page. To solve it, I appended the link tag to the DOM, then set the href attribute with JS.

var cssLink = "<link rel='stylesheet' type='text/css' id='addcss'/>";
$('head').append(cssLink);
$('#addcss').attr('href', src);

I was able to reproduce the issue consistently when including the href in the initial tag, and was unable to reproduce it after implementing this fix.

Sam Weissman-Hohler
  • 1