Last modified: 2014-10-07 21:33:26 UTC
Original bug title: jQuery UI 1.9.2 autocomplete makes triggers content vanishing in Chrome, Opera next This has been reported upstream as https://code.google.com/p/chromium/issues/detail?id=388779 Another issue was reported with out gadget cat-a-lot which also uses jQuery UI 1.9.2 autocomplete. Here is the full description (copy): Example URL: http://commons.wikimedia.org/wiki/User:Rillke/x?withModule=ext.gadget.UserMessages Steps to reproduce the problem: 1. Go to http://commons.wikimedia.org/wiki/User:Rillke/x?withModule=ext.gadget.UserMessages 2. Click "Notify this user" in the sidebar 3. Start typing in the "Select the template to be added to the user's page..." text-input What is the expected behavior? - jQuery UI dialog widget does not disappear, dropdown on top of the dialog widget. What went wrong? http://imgur.com/F9xFj1x,eoXHwJK - jQuery UI dialog widget disappears (though inputs are still accessible) - some parts are still visible so it really looks like something went wrong with rendering Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? No Opera Next 23.0 Chrome version: 35.0.1916.153 m Channel: stable OS Version: 6.1 (Windows 7) Flash Version: Shockwave Flash 14.0 r0 - When I display:none the #AjaxUmContainer, the outer container becomes visible again. - Mozilla Firefox (latest RC) and Internet Explorer 11 do not have this issue. - It became an issue after update to jQuery UI 1.9.2 from 1.8.24 - I am using an ATI Radeon HD 7500G video card. - Use http://commons.wikimedia.org/wiki/User:Rillke/x?debug=true&withModule=ext.gadget.UserMessages if you want to have pretty JS code Tracked this further down: It appear to be <span role="status" aria-live="polite" class="ui-helper-hidden-accessible">58 results are available, use up and down arrow keys to navigate.</span> which has set css to position:absolute; left:-99999999px; Changing to position:absolute; left:-9999999px; solves the issue. Blink should gracefully handle this: http://www.w3.org/TR/CSS21/syndata.html#unsupported-values "4.3.8 Unsupported Values If a UA does not support a particular value, it should ignore that value when parsing style sheets, as if that value was an illegal value."
Commons links: - https://commons.wikimedia.org/wiki/MediaWiki_talk:Gadget-UserMessages.js#Gadget_is_broken_today - https://commons.wikimedia.org/wiki/MediaWiki_talk:Gadget-Cat-a-lot.js#Is_there_a_problem_with_this_gadget.3F
Literally all occurrences of jquery.ui.autocomplete are affected. I think it should be fixed in core.
Created attachment 15783 [details] Screenshot from Google Chrome 35 Rainer: Thanks for the great quality bug report and analysis. Workaround in Google Chrome 35 is to press "Esc" key when browser content is focused. No problem in Firefox 30, dropdown just goes away and screen not blackened.
Trevor, Timo: ping Wondering how much impact this has and in how many places (popular gadgets etc) we use jQuery UI 1.9.2 autocomplete, and whether there's something we could fix on our side.
Is there an upstream jQuery bug report? I don't think it's worth investigating this from our end. Duplicative effort and rather inefficient as I don't think any of us are familiar enough with the internals of the jQuery UI library itself. We can pull in patches from upstream as they come available. I expect either jQuery UI will make a minor release with a work-around, or Chrome will address their recent regression and roll it out on their end.
(In reply to Krinkle from comment #5) > Is there an upstream jQuery bug report? Not needed. The issue is home-made: https://github.com/wikimedia/mediawiki-core/blob/648667ac9f0848dfbb75b513d79c73d7a5e5b7b1/resources/src/jquery.ui-themes/vector/jquery.ui.core.css#L10 Going to submit a patch.
Ah, right. Yeah, that should probably be updated to match the latest value from the rule it was forked from: https://github.com/wikimedia/mediawiki-core/blob/648667ac9f084/resources/lib/jquery.ui/themes/default/jquery.ui.core.css#L14 > .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
Change 143337 had a related patch set uploaded by Rillke: Update rule for vector styled .ui-helper-hidden-accessible https://gerrit.wikimedia.org/r/143337
Change 143337 merged by jenkins-bot: vector/jquery.ui.core.css: Update rule for .ui-helper-hidden-accessible https://gerrit.wikimedia.org/r/143337
Change 143377 had a related patch set uploaded by Bartosz Dziewoński: vector/jquery.ui.core.css: Update rule for .ui-helper-hidden-accessible https://gerrit.wikimedia.org/r/143377
Change 143379 had a related patch set uploaded by Bartosz Dziewoński: vector/jquery.ui.core.css: Update rule for .ui-helper-hidden-accessible https://gerrit.wikimedia.org/r/143379
Change 143377 merged by Ori.livneh: vector/jquery.ui.core.css: Update rule for .ui-helper-hidden-accessible https://gerrit.wikimedia.org/r/143377
Change 143379 merged by Ori.livneh: vector/jquery.ui.core.css: Update rule for .ui-helper-hidden-accessible https://gerrit.wikimedia.org/r/143379
Fixed by Rillke's patch, deployed by Ori.
[Backport was merged into 1.24wmf10 and 1.24wmf11 once upon a time, hence setting Backport_WMF flag to +]
