Page hangs when using @font-face with relative paths in an iframe #125

Closed
glitterandpaste opened this Issue Apr 30, 2012 · 3 comments

Projects

None yet

3 participants

@glitterandpaste

We have a SCORM application that is loaded into third party learning platforms via an iframe and had a problem using repond.js in this context as it caused the page to hang (the jQuery 'ready' event was never fired). We tracked it down to custom fonts that were being included in one of our stylesheets with relative paths, like so:

@font-face {
font-family: 'OpenSansItalic';
src: url('../../../css/fonts/OpenSans/OpenSans-Italic-webfont.eot');
src: url('../../../css/fonts/OpenSans/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../css/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
url('../../../css/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype'),
url('../../../css/fonts/OpenSans/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
font-weight: normal;
font-style: normal;
}

When the document is loaded directly rather than through an iframe everything works great. When in an iframe absolute paths for fonts also seem to work alright.

Collaborator

Sweet edge case! :)

Which browser?

can you put a testcase online?

Sure I'll put together something for you. It happens in IE8 (and possibly IE7?), but interestingly not when using the IE9 dev tools to put the browser in IE8 mode - it has to been a pure IE8 install (pretty frustrating!)

Collaborator

This is currently addressed in the README.

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