Page MenuHomePhabricator

NumberInputWidget prone to 1px wobble in MW theme
Closed, ResolvedPublic

Assigned To
Authored By
Esanders
Jun 11 2015, 3:10 PM

Description

T102127 NumberInputWidget wobbles OOjs UI Demos 2016-08-04.png (284×666 px, 21 KB)
(v0.17.7)
Borders don't quite line up sometimes – horizontally and vertically

Event Timeline

Esanders raised the priority of this task from to Needs Triage.
Esanders updated the task description. (Show Details)
Esanders added a project: OOUI.
Esanders added subscribers: Esanders, Aklapper.

I'm pretty sure this is caused by rounding errors of the multiplications of tiny em values, same as T94494 and T93636, and therefore hopeless.

@matmarex We could maybe set a min-height on this special one...? And at least lower the pain.

Maybe? Not sure if that would help. I say we do T94750 and see if that helps.

On closer inspection, I can still reproduce with Firefox and IE 11, but not other browsers.

There is a multi pixel error on API sandbox:

pasted_file (63×739 px, 1 KB)

Jdforrester-WMF set Security to None.

Change 297260 had a related patch set uploaded (by VolkerE):
MediaWiki theme: Ensure framed buttons are same height

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

Change 303338 had a related patch set uploaded (by VolkerE):
MediaWiki theme: Fix misalignment of widgets by applying pixel min-height

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

Volker_E raised the priority of this task from Low to High.Aug 11 2016, 9:36 PM
Volker_E moved this task from Backlog to Reviewing on the OOUI board.

Change 315456 had a related patch set uploaded (by VolkerE):
MediaWiki theme: Address subpixel rendering errors in NumberInputWidget

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

BeforeWith 315456
Chrome 53/OS X
T142110 NumberInput wobble before 315456 - OOjs UI Demos 2016-10-11.png (358×664 px, 25 KB)
T142110 NumberInput wobble after 315456 - OOjs UI Demos 2016-10-11.png (366×674 px, 26 KB)
Firefox 49/OS X
T142110 NumberInput wobble Fx_Mac before 315456 - OOjs UI Demos 2016-10-11.png (283×667 px, 26 KB)
T142110 NumberInput wobble Fx_Mac after 315456 - OOjs UI Demos 2016-10-11.png (284×663 px, 26 KB)
Chrome 53/Win
T142110-NumberInput-wobble-Chrome_Win-before-315456---OOjs-UI-Demos-2016-10-11.png (297×675 px, 12 KB)
T142110-NumberInput-wobble-Chrome_Win-after-315456---OOjs-UI-Demos-2016-10-11.png (297×675 px, 12 KB)
IE 11/Win
T142110-NumberInput-wobble-IE_Win-before-315456---OOjs-UI-Demos-2016-10-11.png (371×842 px, 15 KB)
T142110-NumberInput-wobble-IE11_Win-after-315456---OOjs-UI-Demos-2016-10-11.png (371×842 px, 14 KB)

Seems to tame, but not to solve… :/

Change 315456 merged by jenkins-bot:
MediaWiki theme: Address subpixel rendering errors in buttoned widgets

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

315456 seemed to just have a positive effect on Chrome/Mac OS X.

T102127 Edge_Win10 OOjs UI demo 2016-12-05.png (347×659 px, 36 KB)

Edge 14 Win 10 (via BrowserStack)

Change 297260 abandoned by VolkerE:
MediaWiki theme: Ensure framed buttons are same height

Reason:
Abandoned in favor of Ic2935cb5d9 and I9a2d3975927

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

Change 342323 had a related patch set uploaded (by VolkerE):
[oojs/ui] NumberInputWidget: Set input to 100% height

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

Change 342323 merged by jenkins-bot:
[oojs/ui] NumberInputWidget: Set input to 100% height

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

Change 303338 abandoned by VolkerE:
MediaWiki theme: Fix misalignment of widgets by applying pixel min-height

Reason:
Resolved through several other patches in the meantime :)

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