New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 8 users

Issue metadata

Status: Fixed
Owner:
Closed: Jan 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug



Sign in to add a comment
link

Issue 571725: Programmatically injected CSS file should be non-blocking

Reported by cath...@gmail.com, Dec 23 2015

Issue description

Chrome Version       : 47.0.2526.106 (64-bit)
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
Safari:
    Firefox: 42.0 OK
         IE: (don't remember version) OK

What steps will reproduce the problem?
1. Set up HTML:
<script>
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'really-really-slow.css');
document.head.appendChild(link);
</script>
<div>This should be black then red.</div>
2. Set up server to respond really-really-slow.css with a 10 seconds delay and with this content:
div { color: red; }
3. Load the page in Chrome.

What is the expected result?
The text in the div should be black initially. After about 10 seconds (when really-really-slow.css is loaded), it turns red.

What happens instead?
The text in the div doesn't show up initially. After about 10 seconds (when really-really-slow.css is loaded), it shows up and it's red from the beginning.

Please provide any additional information below. Attach a screenshot if
possible.
Any inflight CSS download blocks the parsing of HTML, even if the CSS is injected programmatically. This can be verified in Timeline. No HTML parsing during CSS download. This behavior is different from Firefox and IE.
 

Comment 1 by tkonch...@chromium.org, Dec 23 2015

Cc: tkonch...@chromium.org
Labels: Needs-Feedback
Could you please provide a sample test case to reproduce the issue from test team end.

Comment 2 by tkent@chromium.org, Dec 28 2015

Labels: Cr-Blink-CSS Cr-Blink-Loader

Comment 3 by ben.mau...@gmail.com, Jan 4 2016

Here's a rough demo of this:

http://jsbin.com/rakipajele
http://jsbin.com/rakipajele/edit?html,console,output

In this demo, a script tag inserts a css stylesheet from a server that takes 10 seconds to respond. In Firefox, the content all shows up right away. In chrome, the browser waits for the slow stylesheet before displaying content.

Comment 4 by ben.mau...@gmail.com, Jan 4 2016

Looking at the spec, this seems to contradict the behavior around executing scripts:


<script>document.write(performance.now())</script>
<script>
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'https://fake-response.appspot.com/?sleep=5');
document.head.appendChild(link);
</script>
<script>document.write(performance.now())</script>

https://jsfiddle.net/vzs9b3v9/4/

http://www.w3.org/TR/html5/document-metadata.html#styling

A style sheet in the context of the Document of an HTML parser or XML parser is said to be a style sheet that is blocking scripts if the element was created by that Document's parser, and the element is either a style element or a link element that was an external resource link that contributes to the styling processing model when the element was created by the parser, and the element's style sheet was enabled when the element was created by the parser, and the element's style sheet ready flag is not yet set, and, the last time the event loop reached step 1, the element was in that Document, and the user agent hasn't given up on that particular style sheet yet. A user agent may give up on a style sheet at any time.

In this example, the stylesheet element was not created by the Document's parser (it was created via the DOM APIs). Therefore, it should not be  "a style sheet that is blocking scripts". In Firefox you can see that if you change the stylesheet to be inserted by the parser it does block the execution of the script tag:

https://jsfiddle.net/hrrrwd07/1/

Comment 5 by horo@chromium.org, Jan 5 2016

Cc: kouhei@chromium.org

Comment 6 by owe...@chromium.org, Jan 5 2016

Status: Untriaged

Comment 7 by n...@fb.com, Jan 12 2016

Labels: DevRel-Facebook

Comment 8 by horo@chromium.org, Jan 20 2016

Owner: horo@chromium.org
Status: Started
I'm not familiar with CSS enough.
But I think just checking isCreatedByParser() in LinkStyle::process() is enough.
https://codereview.chromium.org/1603873004/

Comment 9 by kenjibaheux@chromium.org, Jan 21 2016

Labels: Hotlist-Loading

Comment 11 by horo@chromium.org, Jan 21 2016

Status: Fixed

Comment 12 by horo@chromium.org, Jan 21 2016

Labels: M-50

Comment 13 by bmau...@fb.com, Jan 21 2016

Thanks for doing this. FYI I filed  bug 580158  as a followup here around the priority for the CSS request -- sending async stylesheets using the "lowest" priority isn't ideal at least for the FB use case

Sign in to add a comment