Page MenuHomePhabricator

[Bug] [AMC] 1px gap at bottom of page actions without download icon (due to font size usage)
Closed, ResolvedPublic2 Story PointsBUG REPORT

Description

Discovered whilst signing off on T214540: [EPIC] AMC Navigation - user menu.

Steps to reproduce

  1. Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/United_States_Senate
  2. Log in and enable AMC via the MobileSettings special page
  3. Open the page actions overflow menu
  4. Hover over the "Cite page" menu item

Expected results

  • The entire background of the menu item is grey

Actual results

  • There's a 1px gap between the grey background of the menu item and the bottom of the overflow menu, i.e.

Contrary observations

  1. This doesn't occur on https://en.m.wikipedia.beta.wmflabs.org/wiki/Barack_Obama
    • Is this because there are 5 menu items in the page actions overflow menu for this page?

Environments observed

  • Browser version: Only Safari (12.1.2)
  • OS version: macOS Mojave (10.14.6)

Developer notes

The download icon uses page-actions-menu__list-item in the overflow menu (should it be toggle-list-item ?)
each toggle-list-item is 49.781px due to the use of font-size 0.9em which causes mw-ui-icon to take sub pixel rendering
16px * 0.9em = 14.4px

font size of 0.875em should be used to get the 14px icon sizes and remove this rounding problem

Event Timeline

phuedx triaged this task as Normal priority.Jul 31 2019, 11:41 AM
phuedx created this task.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 31 2019, 11:41 AM
Jdlrobson renamed this task from [Bug] [AMC] 1px gap at bottom of page actions overflow menu in Safari to [Bug] [AMC] 1px gap at bottom of page actions without download icon (due to font size usage).Jul 31 2019, 4:20 PM
Jdlrobson updated the task description. (Show Details)
phuedx raised the priority of this task from Normal to Needs Triage.Jul 31 2019, 5:12 PM
Jdlrobson triaged this task as Normal priority.Jul 31 2019, 5:13 PM
Jdlrobson set the point value for this task to 2.Jul 31 2019, 5:18 PM

Change 526737 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Normalize smaller fonts

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

@alexhollender I've put this on staging. I've made minor tweaks to the font sizes dropping them from 14.4px to 14px (and importantly hopefully preventing us from doing this again) which apply to

  1. the AMC overflow menu
  2. Special:RecentChanges
  3. last modified
  4. Special:Search page
  5. notification messages e.g. clicking watch

You may also find it fixes "squishing" issues with some icons.

The issue seems to be fixed (screenshot from Safari on MacOS):

@Jdlrobson can you specify what to test/look for regarding the font-size change you mentioned? Some of those pages (Special:RecentChanges, Special:Search page) use multiple font-sizes. Also I inspected the AMC overflow menu on Beta and am still seeing 14.4px as the calculated font-size value.

Also I inspected the AMC overflow menu on Beta and am still seeing 14.4px as the calculated font-size value.

Please test on staging!

Change 526737 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Normalize small fonts

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

@Jdlrobson @phuedx I just checked production in Safari/MacOS and I can't reproduce this issue. Would it make sense to spend our time elsewhere? I feel like we're over investing in a very minor bug.

@Jdlrobson can you answer the question I asked in T229399#5384874?

@Jdlrobson can you specify what to test/look for regarding the font-size change you mentioned? Some of those pages (Special:RecentChanges, Special:Search page) use multiple font-sizes. Also I inspected the AMC overflow menu on Beta and am still seeing 14.4px as the calculated font-size value.

phuedx added a comment.Aug 2 2019, 9:57 AM

@Jdlrobson @phuedx I just checked production in Safari/MacOS and I can't reproduce this issue. Would it make sense to spend our time elsewhere? I feel like we're over investing in a very minor bug.

That's mostly your call, @alexhollender 🙂 Given that this task is now in Ready for Signoff, I'd say we might as well get it done.

alexhollender removed alexhollender as the assignee of this task.Aug 5 2019, 12:41 PM
alexhollender added a subscriber: alexhollender.
ovasileva closed this task as Resolved.Aug 6 2019, 3:23 PM
ovasileva claimed this task.
ovasileva added a subscriber: ovasileva.

Resolving