Closed Bug 1100005 Opened 5 years ago Closed 5 years ago

document.fonts.delete causes delay in font-loading

Categories

(Core :: DOM: CSS Object Model, defect)

36 Branch
defect
Not set

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: public, Unassigned)

References

()

Details

I've developed Plumin.js, a library to create and manipulate fonts in the browser: http://byte-foundry.github.io/plumin.js/index.nodelete.html

It uses the css font-loading API to display the otf fonts it generates. It works great, even in a requestAnimationLoop (if you have the pref enabled, you can uncomment the loop in the editor on the above page and run the code). 

I have two versions of the library, in two different demos:
- http://byte-foundry.github.io/plumin.js/index.nodelete.html This one never deletes the generated fonts, so it leaks a lot of memory but works great in Firefox (until it runs out of memory, of course)
- http://byte-foundry.github.io/plumin.js/index.nodelete.html This one deletes the previous generated font after adding the newest font. It doesn't leak memory but Firefox doesn't have the time to render the newest font. It works great in Chrome though.

The only notable difference is the use of the document.fonts.delete method: https://github.com/byte-foundry/plumin.js/commit/43c2ab5c9c4178922c5512bff0996d386d51ba79#diff-5
woops, wrong link for the demo which deletes fonts: http://byte-foundry.github.io/plumin.js/index.html
The demo which actually deletes fonts has been freezed at this address: http://byte-foundry.github.io/plumin.js/index.delete.html
Use it instead of the url in the previous comment.
Thanks Louis-Rémi for preserving the test case.  I will look into this soon.
I'm trying to work around that bug by reducing usage of document.fonts.delete: currently using a setInterval to only use it once every second. I still see occasional flash of unstyled text, this will look really buggy from the user's point of view :-/
Reviewing the comments here, I'm not completely clear on what the bug is that you're reporting. You're seeing unstyled text when you click on 'Run' in your demo? Sorry if I'm missing something obvious.

You may be seeing the effect of bug 1118981, for which a fix has landed. Could you verify that you're still seeing the problem in the latest nightly? If you're still seeing a problem, could you describe the problem you see and the steps to reproduce it? Thanks.
Flags: needinfo?(public)
I've put up a comparison of using document.fonts.add in a requestANimationFrame loop, with and without using document.fonts.remove first: http://byte-foundry.github.io/plumin.js/bugreport.html
There are two different functions used to manage the fonts: addToFontsNoDelete[1] and addToFontsDelete[2]. Fonts have time to be rendered in Firefox only when document.fonts.delete isn't used, while both run smoothly in Chrome. The problem of not using document.fonts.delete is that is leaks a massive amount of memory.

[1] https://github.com/byte-foundry/plumin.js/blob/gh-pages/bugreport.html#L107
[2] https://github.com/byte-foundry/plumin.js/blob/gh-pages/bugreport.html#L119
Flags: needinfo?(public)
Is there anything I can do to help get this issue resolved?
What version of Firefox are you testing with, Louis-Rémi?  If it's not Nightly, can you try it?  When I try your bugreport.html page (on Linux and on OS X) both sides of the page render identically and I don't see any flashes of unfonted text.
Flags: needinfo?(cam) → needinfo?(public)
I just saw that (Firefox Nightly Linux). The bug seems to be resolved. Has anything changed on your side?
Flags: needinfo?(public)
Yes there have been a number of bug fixes since the feature first landed.  Thanks for the bug report.
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.