Page MenuHomePhabricator

[testwiki] Transparency issue with Search drop down suggestions
Closed, ResolvedPublicBUG REPORT

Description

The issue is present only on testwiki.

Steps to Reproduce:

  1. On testwikiopen an article in VE.
  2. With VE open, start typing in the Search box. The list of suggestions will be displayed behind VE toolbar

Screen Shot 2019-11-20 at 10.33.24 AM.png (424×1 px, 94 KB)

Event Timeline

matmarex added subscribers: Krinkle, matmarex.

I can reproduce this, on testwiki only. It works correctly e.g. on enwiki.

The dropdown (.suggestions) is supposed to have some styles applied (defined in jquery.suggestions.css), including z-index: 1099;, which makes it appear on top of other things. Inexplicably, these styles are not applied. I don't understand why. (It works in debug mode.)

JTannerWMF subscribed.

Looks like the performance team is going to work on this so the Editing-team will move this to external.

Krinkle triaged this task as Medium priority.Dec 4 2019, 11:59 PM

This still works correctly on en.wikipedia.org, thus likely ruling out a recent regression caused by a change in our software.

The dropdown (.suggestions) is supposed to have some styles applied (defined in jquery.suggestions.css), including z-index: 1099;.

I see these applied on en.wikipedia.org. On test.wikipedia.org, they are not considered by the browser it seems. However, the module and its styles did arrive.

mw.loader.getState('jquery.suggestions')
//> "ready"

mw.loader.moduleRegistry['jquery.suggestions'].style
//>
{
  "css": [
    ".suggestions{overflow:hidden;position:absolute;top:0;left:0;width:0;border:0;z-index:1099;padding:0;margin:-1px 0 0 0} …"
  ]
}

And we can try to find which <style> element it ended up in:

for (let node of document.querySelectorAll('style')) { node.textContent.includes('1099') && console.log(node.textContent.slice(0, 100), node); }
//>
".mw-editfont-monospace{font-family:monospace,monospace}.mw-editfont-sans-serif{font-family:sans-ser"
<style></style>
CSSStyleSheet {
  rules: [
    ".mw-editfont-monospace"
    ".mw-editfont-sans-serif"
    ".mw-ui-button"
    ".ve-init-mw-progressBarWidget" 
    "#p-wikibase-otherprojects ul,ul.interProject"
    "li.commons,.wb-otherproject-commons"
    "li.wiktionary,.wb-otherproject-wiktionary"
    ".sr-only"
    ".page-User_Seddon_WMF_testmobile #page-actions,.page-User_Seddon_WMF_testmobile .subpages,.page-User_Seddon_WMF_testmobile .pre-content.heading-holder"
    ".img-responsive,.thumbnail > img,.thumbnail a > img,.carousel-inner > .item > img,.carousel-inner > .item > a > img{ //carousel start .carou…"
   ]
}

And... the .suggestions rule isn't in the list. I thought at first the list was trimmed for visualisation purposes at , but it wasn't the list that was trimmed. It was the selector of the last rule that was trimmed. The remainder of the stylesheet was all interpreted as part of that selector with no rules. This is typical for CSS in the event of a syntax error.

Fixed by disabling the broken "Carousel" gadget on test.wikipedia.org (diff).

The search box now works again on testwiki.