Today I had to triage an IE8 bug related to font's going screwy after iFrame overlays are opened and then closed. Upon further investigation here's what I've found..
Problem
You launch an iframe overlay which includes a reference to a font(@font-face) also used on the parent. You close the overlay, and the iframe is destroyed. When the page driggers a redraw he text on the parent page using that font will get messy. Either appearing scrambled or as a completely different font. You can trigger a redraw by scrolling, moving, or resizing the window.
Cause
When you close the overlay, IE8 tries to be helpful and does a garbage collection removing the @font-face from the page. So as soon as a redraw happens it defaults to using Arial or Helvetica or whatever the default font is setup as.
Solution
The solution I'm likely going with is to reload the CSS on the page upon closing the iframe overlay in IE8. When the CSS is reloaded it will re-create a reference to that font file and be re-included in the page.
var sheets = document.styleSheets; var href;
for(var s = 0, slen = sheets.length; s < slen; s++) { href = sheets[s].href; sheets[s].href = href; }
Notes:
- If I wanted to save myself some rendering time I could break my @font-face declarations out into their own fonts.css file and just reload that one file. Unfortunately we're minifying all CSS down to a single file included in the page so that's not really an option.
- I could also add an ID to my style-sheet include tag and only reload that CSS but that would require everyone on every page to add the ID to their include as well if they wanted to take advantage of this logic. Since different areas of the site are managed by multiple different teams this isn't an option.
- This is only an issue for IE8 which doesn't account for a major slice of our traffic. If they were truly concerned with their online experience they'd upgrade their browser.
- This is definitely not a new bug and I've found references to it dating back many years ago.
