Vertical alignment of labels with edit checkboxes is wrong on initial paint in Firefox
Closed, ResolvedPublic

Description

The newly-activated OOjs checkboxes "This is a minor edit" and "Watch this page" are off-center whenever I load any page on any Wikipedia.
However, if I zoom in and out, they fix themselves. See it in action:

I'm using Firefox 54.0.1 on OS X El Capitan (10.11.6).

Edit: It also happens with other OOJs checkboxes, e.g. in the Beta features tab of Special:Preferences.

Edit 2: Here's another example: The Visual Editor save dialog box. It sometimes takes a few tries to get the checkboxes aligned.

Srdjan_m created this task.Jul 19 2017, 1:43 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 19 2017, 1:43 AM
Jdforrester-WMF triaged this task as Normal priority.Jul 19 2017, 2:21 PM
Jdforrester-WMF renamed this task from OOjs buttons "This is a minor edit" and "Watch this page" are off-center to Vertical alignment of labels with edit checkboxes is wrong on initial paint in Firefox.Jul 19 2017, 2:27 PM
stjn added a subscriber: stjn.Jul 19 2017, 6:37 PM

Huh. I see that too on Firefox 55.0b6 on Windows 10, but it's a lot less glaring – I probably wouldn't have noticed if you didn't point it out.

Initial page loadAfter zooming in and out
matmarex updated the task description. (Show Details)Jul 20 2017, 6:54 PM
Srdjan_m updated the task description. (Show Details)Jul 20 2017, 8:39 PM
Srdjan_m updated the task description. (Show Details)Jul 21 2017, 12:52 PM

BTW, the checkboxes on the Beta Features tab of Special:Preferences aren't OOjs UI, they're faked with old technology (which is why they look a bit different); we should probably switch that over to OOjs UI so we only have to fix this once. Have created T171324: The BetaFeatures tab of Special:Preferences should use OOjs UI for that.

I'm not sure if we can do anything here, this looks like a Firefox bug. I'll try making a smaller test case and file an issue with them. (And poke with the styles and maybe find some way to do this that doesn't trigger the bug.)

This comment was removed by Srdjan_m.

Agreeing with @matmarex – that looks like a browser bug. Can reproduce it in OOUI demos where it stays wrong and in VE in the save dialog where it vertically middle aligns again when the canvas is resized below the dialog height.
Would bet that it comes from a Firefox miscalculation with display: table-cell.

When testing with inline-block it seems to work as expected. Probably regression of table-cell in Firefox or something has changed in DOM on our side.

The same issue is visible in the standalone OOUI demo: https://doc.wikimedia.org/oojs-ui/master/demos/demos.php

Change 368978 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@master] MediaWiki theme: Work around a Firefox rendering bug for checkboxes and radios

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

Change 368978 merged by jenkins-bot:
[oojs/ui@master] MediaWiki theme: Work around a Firefox rendering bug for checkboxes and radios

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

Volker_E moved this task from Backlog to OOjs-UI-0.22.4 on the OOUI board.Aug 1 2017, 3:48 PM
Volker_E edited projects, added OOUI (OOjs-UI-0.22.4); removed OOUI.
Volker_E closed this task as Resolved.
Volker_E assigned this task to matmarex.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.

I've spent some time making a minimal test case for this issue, and I came up with two slightly different ones.

The issue occurs in some cases when setting position: absolute; (but leaving top unset) inside a wrapper element with position: relative; display: inline;. Setting display: inline-block; on the wrapper resolves it (same as our production workaround).

Test case 1: The necessary thing to trigger the issue is to have a page high enough to show a vertical scrollbar.
Test case 2: The necessary thing to trigger the issue is to set and then remove the 'font-size' CSS property.
In both cases, the correct rendering is two squares, blue and red, side-by-side (at the same vertical position).
Firefox's incorrect rendering displays the red square several pixels lower.

Upstream has multiple issues filed that look relevant, but their titles are inscrutable and I don't really know enough about the workings of the renderer to know which one this might be (https://bugzilla.mozilla.org/buglist.cgi?quicksearch=absolute%20inline). I looked at a few and our issue is likely the same as bug 779896, bug 969795 or bug 1045877 (or perhaps all of them together). Bug 255139 might be the root cause of those. All of these bugs are multiple years old (255139 will have its 13th birthday in a week).

Ouch. Nice investigation, though.