Page MenuHomePhabricator

Low-width OOUI window displayed 1em too low in Firefox
Closed, ResolvedPublic

Description

When the browser window has a small width, OOUI switches to a full-window display, but about 1em too low. Look at the TemplateData editor:

You can see vector’s p-personal below the OOUI window and the button at the bottom is truncated.

(please note that p-personal is below because I have added a rule to my common.css to fix T122237)

Event Timeline

Ltrlg created this task.Dec 22 2015, 8:27 PM
Ltrlg raised the priority of this task from to Needs Triage.
Ltrlg updated the task description. (Show Details)
Ltrlg added a project: OOUI.
Ltrlg added a subscriber: Ltrlg.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptDec 22 2015, 8:27 PM

I can't reproduce this problem, either locally or on French Wikipedia.

Ltrlg added a comment.EditedDec 22 2015, 9:45 PM

I’m using GNOME Ubuntu 14.4.

I was able to reproduce with:

but not with:

  • Chromium (47.0.2526.73-0ubuntu0.14.04.1.1106), unlogged

I can’t test other browsers now.

Hmm, I can reproduce in Firefox now. Interesting, I'll look into it.

Here's a reduced test case: https://jsfiddle.net/2vcqj0hj/

In Firefox, you'll see a blue bar at the top of the red area. In other browsers I tested (Opera 12, Opera Blink, IE 11) no blue bar appears. I'm not sure which is the correct rendering, our CSS here is definitely messed up a bit and it should be easy enough to work around this.

Jdforrester-WMF renamed this task from Low-width OOUI window displayed 1em too low to Low-width OOUI window displayed 1em too low in Firefox.Jan 7 2016, 3:25 AM
Jdforrester-WMF triaged this task as Low priority.
Jdforrester-WMF set Security to None.

Interesting browser bug; CCing @Catrope for interest.

Change 266236 had a related patch set uploaded (by Bartosz Dziewoński):
WindowManager: Only apply top: 1em; bottom: 1em; to non-fullscreen windows

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

Change 266236 merged by jenkins-bot:
WindowManager: Only apply top: 1em; bottom: 1em; to non-fullscreen windows

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

Jdforrester-WMF closed this task as Resolved.Jan 26 2016, 7:26 PM
Jdforrester-WMF edited projects, added OOjs-UI-next-release; removed Patch-For-Review.