| Srdjan | |
| Jul 19 2017, 1:43 AM |
| F8947136: image.png | |
| Aug 4 2017, 4:37 PM |
| F8947186: T171022-testcase1.html | |
| Aug 4 2017, 4:37 PM |
| F8947182: image.png | |
| Aug 4 2017, 4:37 PM |
| F8947185: T171022-testcase2.html | |
| Aug 4 2017, 4:37 PM |
| F8803613: pNzyJivRif.gif | |
| Jul 20 2017, 8:39 PM |
| F8803403: 8HRRfcDpP8.gif | |
| Jul 20 2017, 6:54 PM |
| F8803398: image.png | |
| Jul 20 2017, 6:53 PM |
| F8803396: image.png | |
| Jul 20 2017, 6:53 PM |
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.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| MediaWiki theme: Work around a Firefox rendering bug for checkboxes and radios | oojs/ui | master | +4 -0 |
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 load | After zooming in and out |
 |  |
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.)
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
Change 368978 merged by jenkins-bot:
[oojs/ui@master] MediaWiki theme: Work around a Firefox rendering bug for checkboxes and radios
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).