Page MenuHomePhabricator

Some banners have a delay in parsing CSS
Closed, ResolvedPublic

Details

Reference
bz41751

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 1:10 AM
bzimport set Reference to bz41751.
bzimport added a subscriber: Unknown Object (MLST).

pgehres wrote:

I've seen this in the past. It is actually not the CSS not being loaded, but a delay in the parsing of the CSS due to something else blocking the execution.

Its still something that should be looked into.

But if I remmember correctly, sometimes it never load the CSS and stays as in
https://upload.wikimedia.org/wikipedia/commons/8/80/Banner_without_CSS.png
forever (maybe that is how I was able to take the screenshot).

pgehres wrote:

It certainly is possible, although it also seems like there are other things wrong in that screenshot, e.g. the button is translated, but the text is not.

We had a bunch of issues a couple of days ago and they are all possibly related. I'm not going to close this bug since we haven't done anything to address this specifically, but please let us know if you see it again. If it does, can you check your javascript error console?

mwalker wrote:

Well, we have two options. We can either remove the contents of this banner
completely, or we can look further into why the style information is not being
applied.

The first is doable because this banner is in fact not meant to be seen (it's
used only as a test mechanism for banner delivery).

The second is preferable because if it's not working on one banner it probably
is going to cause issues for other banners.

(In reply to comment #3)

It certainly is possible, although it also seems like there are other things
wrong in that screenshot, e.g. the button is translated, but the text is not.

We had a bunch of issues a couple of days ago and they are all possibly
related. I'm not going to close this bug since we haven't done anything to
address this specifically, but please let us know if you see it again. If it
does, can you check your javascript error console?

So, there was a banner (editorSurvey2012) when I visited https://en.wikipedia.org/wiki/Coquimbo
It was visible for approximately one second, and with the same ammount of formatting as in the above example. The console had no error messages (on Google Chrome 22.0.1229.94).

pgehres wrote:

Based on a quick reading of the source of that banner, it looks like by default the banner is hidden:
http://meta.wikimedia.org/w/index.php?title=Special:NoticeTemplate/view&template=2012EditorSurvey

<code>
#editorSurvey2012 {
[..snip...]
display: none;
}
</code>

There is JS that would enable its display as well.

mwalker wrote:

It appears that at least in chrome JS/CSS are evaluated in the same thread. Assuming there's no priority scheduling going on that means we have to wait for everything else on the page to load...

If we moved to a strategy where we hid the banner CSS by default and then reveal with JS we would delay display of the banners and go back to the banner bump problem which is just as much of a problem.

Approaching it from an angle that we shouldn't inject DOM content until it's ready to be seen probably would work thought it would make banner creation much more of a PITA -- the banner HTML for initially hidden banners would have to be stored in a JS variable...

Other ideas?

Things hidden by default should have 'display:none' in inline CSS (not in a style block or external file). That's how we always handle it in extensions so that there are no possible delays or dependencies. This should be fixed in the banner code, IMO.

I've updated the banner code.

I'm still seen this frequently. It is annoying.

mwalker wrote:

Looks like Kaldari only got the editor survey banner. I've now also updated the blank test banner code for inline css. Please let us know if even after this change you're still seeing it.

Pcoombe claimed this task.
Pcoombe subscribed.

Closing this since we've been using Kaldari's solution (inline 'display:none') in all banners and haven't seen any repeats of the problem.