jQuery causes a second HTTP GET request on @font-face files on Firefox
|Reported by:||jdhoek||Owned by:||jdhoek|
I'll start by noting that this is a very confusing bug, so my apologies if jQuery turns out not to be responsible at all.
The past few days I've trying to debug troublesome behaviour observed in Firefox (4 and 5 at least). It boils down to this: when I load fonts via the @font-face mechanism, Firefox requests the WOFF font-files. As soon as I add jQuery to the HMTL page, Firefox request them a second time after the DOMContentLoaded event, causing a nasty redrawing of the fonts on screen.
I have created a zip-archive with all the files needed to reproduce this issue:
- A HTML file "twice.html" that loads jQuery and links to a simple stylesheet "stylesheet.css" which loads a (free software) font.
- A HTML file "once.html" which does the same, but includes the CSS in the file itself.
The double request issue only occurs with the external stylesheet. When the same CSS is included directly in the HTML file (at least the @font-face part), the issue does not occur.
I can observe the font-file being requested twice by looking at Firebug's net panel.
- Behaviour is the same for Firefox 5 on Ubuntu 11.04 and Windows 7.
- Removing jQuery from the HTML file makes the issue go away.
- Placing the @font-face declaration inside the HTML file (not in an external stylesheet) makes the issue go away.
jQuery may not be responsible at all, but I can't think of another actor that would cause such a second request after the DOMContentLoaded event. Any insights and tips would be greatly appreciated.
Change History (7)
comment:4 follow-up: 5 Changed 6 years ago by
|Component:||unfiled → misc|
|Owner:||set to jdhoek|
|Status:||new → pending|
comment:6 Changed 6 years ago by
|Priority:||undecided → low|
|Status:||new → closed|