Page MenuHomePhabricator

jQuery UI 1.9.2 autocomplete makes triggers content vanishing in Chrome, Opera next
Closed, ResolvedPublic

Description

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

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."


Version: 1.24rc
Severity: major
See Also:
http://code.google.com/p/chromium/issues/detail?id=388779

Details

Reference
bz67243

Event Timeline

bzimport raised the priority of this task from to High.
bzimport set Reference to bz67243.
bzimport added a subscriber: Unknown Object (MLST).
Rillke created this task.Jun 28 2014, 10:23 AM

Literally all occurrences of jquery.ui.autocomplete are affected. I think it should be fixed in core.

Created attachment 15783
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.

Attached:

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.

Rillke added a comment.Jul 1 2014, 3:46 PM

(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 +]