Page MenuHomePhabricator

mw.loader.using() doesn't really wait for CSS to be loaded
Closed, InvalidPublic

Description

While ResourceLoader seems to correctly wait for JS dependencies to be loaded before firing using()'s callback, when it adds CSS to the page, all it does is create <link> elements to the head, not waiting for the CSS content to really be loaded.

Which means that something waiting for CSS dependencies sees its callback called too early, when the required CSS hasn't been loaded yet.

Symptoms in code leveraging mw.loader.using() include broken CSS flashing by (because elements are shown before their styles are applied), or even broken application logic when JS does size-dependent actions fail due to missing styles (the elements aren't the size they will be once the styles are applied).

Afaik modern browsers support the onload event on link elements, so that's probably a solution to explore. If that can't be done, an alternative is to insert a special CSS rule at the end of each CSS file served indicating that the CSS has been loaded, and waiting for that style to appear. The latter is what I'm going to attempt right now as a workaround for MultimediaViewer, which is broken (particularly in Chrome) at the moment because of this bug.


Version: 1.23.0
Severity: normal

Details

Reference
bz61852

Event Timeline

bzimport raised the priority of this task from to Normal.Nov 22 2014, 2:50 AM
bzimport set Reference to bz61852.
bzimport added a subscriber: Unknown Object (MLST).
Gilles created this task.Feb 24 2014, 4:06 PM

The workaround for Multimedia Viewer: https://gerrit.wikimedia.org/r/115196

all it does is create <link> elements to the head, not waiting for the CSS content to really be loaded.

Use of dynamically created <link> tags suggests you're in debug mode (otherwise it just creates <style> tags). If so, that is indeed an issue because there is no reliable callback for link tags at the moment.

However if you were seeing this in production mode with style tags as well, perhaps it is because MMV runs additional mw.loader.using() steps which previously caused bugs indeed with premature module execution (fixed via T105973).

Can you confirm whether this is still an issue in MMV without the workaround?

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 4 2015, 4:47 AM

Change 235988 had a related patch set uploaded (by Gilles):
Remove CSS readiness workaround

https://gerrit.wikimedia.org/r/235988

Indeed with this change applied and a simulate slow connection, I don't see CSS late-loading issues anymore.

Change 235988 merged by jenkins-bot:
Remove CSS readiness workaround

https://gerrit.wikimedia.org/r/235988

Gilles closed this task as Invalid.Sep 7 2015, 5:46 AM
Gilles claimed this task.
Krinkle set Security to None.
Krinkle removed a subscriber: wikibugs-l-list.
Restricted Application added a project: Multimedia. · View Herald TranscriptSep 7 2015, 4:43 PM