1100005 - document.fonts.delete causes delay in font-loading

Status: RESOLVED WORKSFORME

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

Description

[Louis-Rémi BABE]

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

Comment 1

[Louis-Rémi BABE]

woops, wrong link for the demo which deletes fonts: http://byte-foundry.github.io/plumin.js/index.html

Comment 2

[Louis-Rémi BABE]

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.

Comment 3

[Cameron McCormack (:heycam)]

Thanks Louis-Rémi for preserving the test case.  I will look into this soon.

Comment 4

[Louis-Rémi BABE]

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 :-/

Comment 5

[John Daggett (:jtd)]

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.

Comment 6

[Louis-Rémi BABE]

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

Comment 7

[Louis-Rémi BABE]

Is there anything I can do to help get this issue resolved?

Comment 8

[Cameron McCormack (:heycam)]

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.

Comment 9

[Louis-Rémi BABE]

I just saw that (Firefox Nightly Linux). The bug seems to be resolved. Has anything changed on your side?

Comment 10

[Cameron McCormack (:heycam)]

Yes there have been a number of bug fixes since the feature first landed.  Thanks for the bug report.