Side navigation
#9675 closed bug (cantfix)
Opened June 27, 2011 10:25AM UTC
Closed June 29, 2011 01:50PM UTC
Last modified October 08, 2013 09:46PM UTC
jQuery causes a second HTTP GET request on @font-face files on Firefox
| Reported by: | jdhoek | Owned by: | jdhoek |
|---|---|---|---|
| Priority: | low | Milestone: | 1.next |
| Component: | misc | Version: | 1.6.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
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.
Additional information:
- 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.
Attachments (0)
Change History (7)
Changed June 27, 2011 10:30AM UTC by comment:1
Changed June 27, 2011 10:43AM UTC by comment:2
I have uploaded the reproduction case itself as well:
http://jeroenhoek.nl/jquery/twice.html
This webhost is not very fast, and the issue does occur, but here the first request to the font-file gets aborted, after which the second one happens.
Changed June 27, 2011 11:59AM UTC by comment:3
Hello
I can confirm, that I have exactly the same problem too with a new website I'm currently coding. Using jQuery 1.6 + font-face too.
Firebug tells me the same font file is downloaded twice and I see an ugly flicker.
Cheers,
Michael
Changed June 27, 2011 01:21PM UTC by comment:4
| _comment0: | Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket! \ \ Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, I've created this boilerplate: http://jsfiddle.net/rwaldron/da3nM/ Open the link and click to "Fork" in the top menu. \ \ Also, your screenshots seem to indicate that one has loaded the stylesheet (has two woff requests) and the other has not (has one woff request). → 1309180946777706 |
|---|---|
| _comment1: | Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket! \ \ Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, I've created this boilerplate: http://jsfiddle.net/rwaldron/da3nM/ Open the link and click to "Fork" in the top menu. → 1309181040617993 |
| component: | unfiled → misc |
| owner: | → jdhoek |
| status: | new → pending |
Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!
Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, I've created this boilerplate: http://jsfiddle.net/rwaldron/da3nM/ Open the link and click to "Fork" in the top menu.
Have you tried omitting jQuery and writing a vanilla DOMContentLoaded handler?
Changed June 29, 2011 11:27AM UTC by comment:5
| status: | pending → new |
|---|
Replying to [comment:4 rwaldron]:
Have you tried omitting jQuery and writing a vanilla DOMContentLoaded handler?
I have now, and I can reproduce the double loading bug in Firefox this way. This puts jQuery in the clear, so this bug is not a jQuery bug, but a Firefox bug.
Replying to [comment:3 michael.heuberger]:
Can you reproduce this issue with a simple DOMContentLoaded handler as well?
I filed the bug over at Mozilla:
Changed June 29, 2011 01:50PM UTC by comment:6
| keywords: | → browser-firefox |
|---|---|
| priority: | undecided → low |
| resolution: | → cantfix |
| status: | new → closed |
Thanks for looking into it.
Changed October 08, 2013 09:46PM UTC by comment:7
| keywords: | browser-firefox |
|---|
Just removing the browser-firefox keyword here because the actual issue turned out to be a Firebug bug.
I can't seem to attach any files, so here are the relevant files:
Reproduction:
Firebug's Net panel showing the behaviour: