Page MenuHomePhabricator

Menu icons misaligned in Firefox 50 (light navigation drawer)
Closed, ResolvedPublic

Description

Affects the new light version of the navigation drawer.

Expected: Icons are vertically aligned with the text

Screenshot from Chrome 54.0.2840.98

Screen Shot 2016-12-05 at 2.01.59 PM.png (379×492 px, 26 KB)

Actual: Icons are not properly aligned

Seem to be on the baseline of the text instead of vertically centered. Screenshot from Firefox 50.0.2. Browser font size: 18px.

Screen Shot 2016-12-05 at 2.01.30 PM.png (385×453 px, 26 KB)


The issue is subtle, but it is there. See this next image, in red is the center of the icon, in blue is the center of the text (those should be on the same place as in chrome):

Screen Shot 2016-12-01 at 10.19.06 AM.png (421×364 px, 35 KB)

(they are manually drawn, so excuse me if they are inaccurate)

Event Timeline

Production (en.m.wikipedia.org) doesn't show the same misalignment to me.

Seems to be fixed on the staging server:

Screen Shot 2016-12-08 at 4.53.29 PM.png (1×1 px, 257 KB)

The production server seems to have another problem: T152732

@Jhernandez can we close this task or do you still see the problem?

I'm still seeing the same thing but if others aren't, lets just close it.

BrowserStack settings
OS: OSX El Capitan
Browser: Firefox 50 (latest)

Steps I reproduced:

  1. With Browserstack open on credentials above, go to the link http://reading-web-staging.wmflabs.org/wiki/Main_Page
  2. Tap on ☰ to open Navigation Drawer.

Expected results: Icons are vertically aligned with the text

Actual results: According to this screencap

T152391A.jpg (900×1 px, 428 KB)
the issue has been fixed, it looks more cleanly aligned than the (Screen_Shot_2016-12-01_at_10.19.06_AM) example above.

ovasileva claimed this task.