Page MenuHomePhabricator

[Regression wmf.20] Using <fieldset> and <legend> for FieldsetLayouts breaks rendering in Firefox
Closed, ResolvedPublic1 Estimated Story Points

Description

The icon for "Optionen" is placed much too low:

screenshot.png (460×716 px, 30 KB)

Reproducible with version currently deployed on Wikipedia with Firefox 46 on Ubuntu.

Event Timeline

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/

ChromiumFirefoxOpera 12IE 11Edge
pasted_file (236×242 px, 4 KB)
pasted_file (229×235 px, 4 KB)
pasted_file (231×234 px, 3 KB)
pasted_file (231×240 px, 3 KB)
pasted_file (231×238 px, 3 KB)

This also affects the info popups for FieldsetLayouts, this is especially visible in the "Media settings" dialog:

pasted_file (703×713 px, 42 KB)
pasted_file (703×713 px, 39 KB)

Essentially, T145678 and T145680 were not really fixed for Firefox.

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

Change 312526 had a related patch set uploaded (by Bartosz Dziewoński):
demo: Add FieldsetLayout with icon

https://gerrit.wikimedia.org/r/312526

I've searched a bit and I see two more possible solutions:

(Yes, these are workarounds from 2011 and 2008, respectively. :) )

Change 312542 had a related patch set uploaded (by Bartosz Dziewoński):
FieldsetLayout: Work around absolute positioning problems on Firefox

https://gerrit.wikimedia.org/r/312542

matmarex added a subscriber: Jdforrester-WMF.

Change 312526 merged by jenkins-bot:
demo: Add FieldsetLayout with icon

https://gerrit.wikimedia.org/r/312526

Change 312542 merged by jenkins-bot:
FieldsetLayout: Work around positioning problems in Firefox

https://gerrit.wikimedia.org/r/312542

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.

Esanders raised the priority of this task from High to Unbreak Now!.Sep 27 2016, 11:56 PM

No, so I downloaded some virtual machines, just for you :). It works perfectly.

IE 9IE 10
VisualEditor
pasted_file (768×1 px, 95 KB)
pasted_file (768×1 px, 96 KB)
JS demo
pasted_file (768×1 px, 83 KB)
pasted_file (768×1 px, 78 KB)

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 6IE 8
PHP demo
pasted_file (768×1 px, 89 KB)
pasted_file (768×1 px, 99 KB)

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.

Change 313846 had a related patch set uploaded (by Jforrester):
OOjs UI: FieldsetLayout: Work around positioning problems in Firefox

https://gerrit.wikimedia.org/r/313846

Jdforrester-WMF renamed this task from Misplaced icon in category dialog in VE to [Regression wmf.20] Using <fieldset> and <legend> for FieldsetLayouts breaks rendering in Firefox.Oct 3 2016, 6:17 PM
Jdforrester-WMF assigned this task to matmarex.
Jdforrester-WMF moved this task from Reviewing to OOjs-UI-0.18.0 on the OOUI board.
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.18.0); removed OOUI.

Change 313855 had a related patch set uploaded (by Jforrester):
FieldsetLayout: Work around positioning problems in Firefox

https://gerrit.wikimedia.org/r/313855

Change 313846 abandoned by Jforrester:
OOjs UI: FieldsetLayout: Work around positioning problems in Firefox

Reason:
We're doing a release instead.

https://gerrit.wikimedia.org/r/313846

Change 313855 merged by jenkins-bot:
FieldsetLayout: Work around positioning problems in Firefox

https://gerrit.wikimedia.org/r/313855

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.