1352707 - Reparsing stylesheet with @font-face makes text blink

Status: NEW

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Oriol Brufau [:Oriol]]

Attachment: demo

Create a stylesheet with

    @font-face {
     font-family: 'Blink';
     src: url("//.ttf") format("truetype");
    }

Style some element with font-family: "Blink"

Reparse the stylesheet with stylesheet.textContent += '';

Firefox attempts to redownload the font file, and the text blinks.

See the attached demo. You can also enable paint flashing to make the repaints more obvious.

Comment 1

[Vlad Bacia-Mociran [:VladB]]

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:55.0) Gecko/20100101 Firefox/55.0

I have tested your issue on latest Firefox release v52.0.2 and latest Nightly (Build ID: 20170404030204) and managed to reproduce it. I have opened the link provided in comment 0 in a new tab and the text is continuously blinking.

Comment 2

[Cameron McCormack (:heycam)]

Is this a regression?

Comment 3

[Oriol Brufau [:Oriol]]

(In reply to Cameron McCormack (:heycam) from comment #2)
> Is this a regression?

Bisecting with mozregression, I get

 - Until 2011-02-10, there was no blink
 - Pushlog: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=afb62e95311a&tochange=8013e7a30984
 - Between 2011-02-11 and 2012-01-15, it blinked continuously
 - Pushlog: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=21c84409902e&tochange=047c8ba7d2e4
 - Between 2012-01-16 and 2016-02-01, it blinked only from time to time, much less noticeably
 - Pushlog: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=941033a51983&tochange=5f9ba76eb3b1
 - Since 2016-02-02, it blinks continuously again

Comment 4

[Cameron McCormack (:heycam)]

Jonathan, is this something you know about or would have time to look at?

Comment 5

[Jonathan Kew [:jfkthame]]

The testcase also seems to blink in Safari, FWIW.

For me, it blinks rather erratically (sounds like "Between 2012-01-16 and 2016-02-01, it blinked only from time to time"). I expect the exact behavior is dependent on various timing issues -- how quickly the request for the font file fails, for example, and how busy the machine is overall, etc.

Each time the stylesheet is reset, we re-parse the @font-face rule in it. As there's been a modification to the user font set, we re-do the font matching algorithm, and the element finds that it should render using the user font; but that font isn't yet loaded, so we initiate the download and temporarily hide the content. The download fails, at which point we show the content in a fallback font instead.

It only blinks, I think, because the @font-face rule points to an invalid resource that always fails to load. If it were a valid font, it would have been loaded the first time, and then when the stylesheet is re-parsed it would be present in the user font cache and so it would immediately render. So I suspect the blinking here is rather an edge-case, caused by the bad @font-face rule, and wouldn't affect a well-authored site. As such, I'd regard it as pretty low priority to try and address.

Comment 6

[Oriol Brufau [:Oriol]]

I noticed this issue in a real webpage, when using the Inspector devtool. Toggling some CSS declaration reparses the whole stylesheet (btw, that seems an awful idea, but whatever). This attempted to download the font, which was a good URI, but Firefox blocked it:

> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://someuri.com/font.woff. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://anotheruri.com’).

> downloadable font: download failed (font-family: "Font" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: https://someuri.com/font.woff

Comment 7

[Jonathan Kew [:jfkthame]]

(In reply to Oriol from comment #6)
> I noticed this issue in a real webpage, when using the Inspector devtool.
> Toggling some CSS declaration reparses the whole stylesheet (btw, that seems
> an awful idea, but whatever). This attempted to download the font, which was
> a good URI, but Firefox blocked it:
> 
> > Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://someuri.com/font.woff. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://anotheruri.com’).
> 
> > downloadable font: download failed (font-family: "Font" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: https://someuri.com/font.woff

Well, if it's a cross-origin request and the appropriate CORS header isn't set by the site serving the font resource, then Firefox is correct to block it; that's the behavior required by the spec.[1] So I'd consider that such a site is not well-authored, and it's not surprising if this gives inferior results.

[1] https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements

Comment 8

[Oriol Brufau [:Oriol]]

Yes, of course Firefox is correct to block it :) I just wanted to note that it might not be such a rare case, because I'm sure there are lots of sites with misconfigured CORS. In this case, Access-Control-Allow-Origin was the domain with http, but I was viewing the site in https.