The issue is present only on testwiki.
Steps to Reproduce:
- On testwikiopen an article in VE.
- With VE open, start typing in the Search box. The list of suggestions will be displayed behind VE toolbar
Etonkovidova | |
Nov 26 2019, 10:03 PM |
F31296457: Screen Shot 2019-11-20 at 10.33.24 AM.png | |
Nov 26 2019, 10:03 PM |
The issue is present only on testwiki.
Steps to Reproduce:
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.)
Looks like the performance team is going to work on this so the Editing-team will move this to external.
This still works correctly on en.wikipedia.org, thus likely ruling out a recent regression caused by a change in our software.
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.