Page MenuHomePhabricator

Overlay icons misaligned in alpha
Closed, ResolvedPublic


Screen_Shot_2015-01-07_at_11.00.51_AM.png (221×1 px, 16 KB)

Event Timeline

Jdlrobson raised the priority of this task from to Needs Triage.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: Readers-Web-Backlog.
Jdlrobson added subscribers: Jdlrobson, Prtksxna.

Change 183298 had a related patch set uploaded (by Jdlrobson):
Revert "Remove the 'top' definition from .mw-ui-icon-element:before"


Note this also effects the hamburger icon @Maryana when you close the overlay. @Prtksxna any idea how to fix this?

Problematic rule in mobile is:
.overlay-header .overlay-action a, .overlay-header button {
min-height: 3.35em;

There isn't any documentation on the styleguide about using the mw-ui-icon class with a button. Changing the element to div immediately solves the problem. So I tried to make a standalone button with the class to see if the problem persists, it does not. mw-ui-icon when correctly used supports both divs and buttons.

Which would mean that there are other styles that are overriding it. Jumping into the inspector I found a rule that sets the pseudo element's height to 100% but I couldn't find the corresponding code that adds this. Unchecking that rule solves the problem too.

Screen_Shot_2015-01-08_at_3.55.44_PM.png (78×1 px, 26 KB)

I am not familiar enough with the mobile front-end code to be able to find where it might be, though I tried. Hope this helps, @Jdlrobson!

Awesome. I think I can work this out now..

Change 183632 had a related patch set uploaded (by Jdlrobson):
Fix icons


Change 183298 abandoned by Jdlrobson:
Revert "Remove the 'top' definition from .mw-ui-icon-element:before"

Seems I found another fix thanks to Prateek's pointer ->