The icon for "Optionen" is placed much too low:
Reproducible with version currently deployed on Wikipedia with Firefox 46 on Ubuntu.
Description
Description
Details
Details
Customize query in gerrit
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | thcipriani | T145220 MW-1.28.0-wmf.21 deployment blockers | |||
| Resolved | matmarex | T146462 [Regression wmf.20] Using <fieldset> and <legend> for FieldsetLayouts breaks rendering in Firefox |
Event Timeline
Comment Actions
This is a Firefox bug related to using <fieldset> + <legend>. We probably should've noticed this when testing the change that introduced those, whoops…
Reduced test case: https://jsfiddle.net/ggw0m96c/1/
| Chromium | Firefox | Opera 12 | IE 11 | Edge |
Comment Actions
Assuming we don't want to abandon <legend>, I see two possible solutions:
- Set the <legend> to position: absolute – this prevents the Firefox bug from appearing. We'd also have to absolutely position the icon and the help popup. And we'd lose the ability to have multi-line labels (and you can see one in the second screenshot above, so that design would need changing).
- Put the icon and the help popup inside the <legend>. I'm not sure if this would be bad accessibility-wise, but… probably not? We'd need to reshuffle a bunch of stuff internally but it can be done. (And the inline-table hack from https://gerrit.wikimedia.org/r/310800 could be undone.)
Comment Actions
Change 312526 had a related patch set uploaded (by Bartosz Dziewoński):
demo: Add FieldsetLayout with icon
Comment Actions
I've searched a bit and I see two more possible solutions:
- Inspired by http://sitesbyjoe.com/posts/detail/2011/07/21/styling-fieldsets-and-legends-with-css, float: left on the legend also helps avoid the positioning issue (same as when the legend is not present).
- Inspired by http://www.codingforums.com/html-and-css/132624-firefox-specific-css.html, we could wrap the fieldset in some div and give that div position: relative to position things like the help popups against, rather than the fieldset.
(Yes, these are workarounds from 2011 and 2008, respectively. :) )
Comment Actions
Change 312542 had a related patch set uploaded (by Bartosz Dziewoński):
FieldsetLayout: Work around absolute positioning problems on Firefox
Comment Actions
Change 312542 merged by jenkins-bot:
FieldsetLayout: Work around positioning problems in Firefox
Comment Actions
Have you tested IE9/10 as well?
The fact we have to use more floats/position:absolutes to work around these bugs makes it feel like a game of whack-a-mole to get these elements to behave consistently, and is the reason which switched to <div>s in the first place.
Comment Actions
No, so I downloaded some virtual machines, just for you :). It works perfectly.
| IE 9 | IE 10 | |
| VisualEditor | ||
| JS demo | ||
The OOUI PHP demo also looks fine in IE 8. It's all messed up in IE 6, but the FieldsetLayout label is one of the few things which display semi-sensibly.
| IE 6 | IE 8 | |
| PHP demo | ||
Comment Actions
This is now resolved in OOjs UI. The fix is not released yet, nor deployed to Wikimedia production. If this is UBN for the VE team, please cherry-pick it manually and deploy it.
Comment Actions
Change 313846 had a related patch set uploaded (by Jforrester):
OOjs UI: FieldsetLayout: Work around positioning problems in Firefox
Comment Actions
Change 313855 had a related patch set uploaded (by Jforrester):
FieldsetLayout: Work around positioning problems in Firefox
Comment Actions
Change 313846 abandoned by Jforrester:
OOjs UI: FieldsetLayout: Work around positioning problems in Firefox
Reason:
We're doing a release instead.
Comment Actions
Change 313855 merged by jenkins-bot:
FieldsetLayout: Work around positioning problems in Firefox
Comment Actions
Did a new release of OOUI (0.17.10) with these fixes; pulls-through to MW are in https://gerrit.wikimedia.org/r/#/q/I4faf83e301417ef5721a81a4a69890854e6c266b with master done and wmf.20 to be done in the SWAT this afternoon.