Page MenuHomePhabricator

Main menu SVG icons should be 24 by 24 px to support IE8
Closed, ResolvedPublic2 Story Points

Description

Notice all icons in the left menu, page actions and header are stretched in IE8 as viewed via browser stack.
Various Windows based phones run this browser.

  • Toggle icons not visible with no text fallback
  • hamburger icon stretched
  • menu icons only show when you hover over them and appear stretched.

The issue is that the underlying SVGs set a width and height greater than 24px

Developer notes

  • All SVGs need to be resized so that they stop using: viewBox="0 0 48 48" width="48" height="48"

and instead use:
viewBox="0 0 24 24" width="24" height="24"

Problematic modules are:

  • skins.minerva.mainMenu.icons

Assets

SVGs recreated with 24x24 canvas

Note: the assets follow the new work that is being done by wmf design > tracked here > https://phabricator.wikimedia.org/T147494

The new assets also use the correct color. There is debate on ways to change the color of icons using code alone to not add more assets. till then, let's use the correct colored SVGs

Sign off steps

  • Load IE8 in browser stack and verify icons in main menu are not stretched on https://en.m.wikipedia.org. --------------------------

Attached:

Details

Reference
bz70961
Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterUpdate main menu icons

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson triaged this task as Medium priority.Sep 16 2015, 6:39 PM
Jdlrobson lowered the priority of this task from Medium to Low.Feb 2 2016, 6:23 PM
Jdforrester-WMF renamed this task from Icons in IE8 due to lack of support for background sizes to MobileFrontend icons distorted in IE8 due to lack of support for background sizes.Apr 28 2016, 7:59 PM

it seems that OOUI icons have this problem too:

Should we add some IE8 specific rule to hide icons in this case to avoid the ugliness?

Jdlrobson renamed this task from MobileFrontend icons distorted in IE8 due to lack of support for background sizes to Icons via OOUI/MediaWiki UI distorted in IE8 due to lack of support for background sizes.Apr 28 2016, 8:01 PM
Jdlrobson added a project: OOUI.
Volker_E added a subscriber: Volker_E.

From my tests with BrowserStack this isn't caused by background-size as the hamburger icon and the search icon (both with background-size properties) are rendered correctly. Page requested: https://doc.wikimedia.org/oojs-ui/master/demos/demos.php?page=widgets&theme=wikimediaui&direction=ltr
It seems to be more a problem around the way the menu is constructed.
But the menu doesn't work anyways correctly in IE 8 (you can't close it anymore without clicking one of the items), so I wonder if it's worth tracking down…?

Volker_E renamed this task from Icons via OOUI/MediaWiki UI distorted in IE8 due to lack of support for background sizes to Icons of side navigation distorted in IE8.May 31 2017, 2:47 PM
Jdlrobson renamed this task from Icons of side navigation distorted in IE8 to All SVG icons should be 24 by 24 px to support IE8.May 31 2017, 6:19 PM
Jdlrobson moved this task from Backlog to Blocked on the Readers-Web-Backlog (Tracking) board.
Jdlrobson added a subscriber: Nirzar.

@Nirzar can we standardise on 24x24?

We have come to an agreement for 24px canvas with design team.

Jdlrobson renamed this task from All SVG icons should be 24 by 24 px to support IE8 to Main menu SVG icons should be 24 by 24 px to support IE8.Jun 29 2017, 10:03 PM
Jdlrobson raised the priority of this task from Low to Medium.
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.

@Jdlrobson do you need the updated SVGs?

@Nirzar it would certainly make it easier if you can! Not sure if you can find and replace these SVGs and devs may not have SVG resize tools.

MaxSem removed a subscriber: MaxSem.Jul 3 2017, 10:31 PM
kaldari removed a subscriber: kaldari.Jul 4 2017, 12:15 AM
Nirzar updated the task description. (Show Details)Jul 10 2017, 6:36 PM
Nirzar updated the task description. (Show Details)
bmansurov moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.
bmansurov added a comment.EditedJul 11 2017, 7:33 PM

@Nirzar can you upload an updated version of the Anonymous icon too? That's the only one missing.

I also noticed that some of the new icons are completely different from the existing ones, while others have different colors. This change isn't mentioned in the task description. Can you confirm that it's the desired behavior?

Change 364509 had a related patch set uploaded (by Bmansurov; owner: Bmansurov):
[mediawiki/extensions/MobileFrontend@master] WIP: Update main menu icons

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

@Jdlrobson the proposed solution doesn't seem to fix the issue in IE8. Anything else that needs to be done?

@bmansurov I was kinda hoping to get rid of the logic to show different icons for logged in and logged out users. just show single icon for all but that would be adding to the scope?

Yes, that's a different issue that needs to be tackled separately if possible.

@bmansurov okay i will give another icon then. thanks

I also noticed that some of the new icons are completely different from the existing ones, while others have different colors. This change isn't mentioned in the task description. Can you confirm that it's the desired behavior?

I will mention it. WMF Design is under process to renew the icons to get rid of the teardrops and I would like to get that change in instead of updating the icons again in a month.

the color change was intended to be done last time around and we didn't do it because there is a technical debate on if we can change svg colors in code. while the debate continues, we shipped black icons and I would like to fix that.

I will update the task desc.

Nirzar updated the task description. (Show Details)Jul 11 2017, 9:00 PM
Nirzar added a comment.EditedJul 11 2017, 9:55 PM

@bmansurov

here's the missing SVG for non logged in users

after testing it on RWS i caught a subpixel issue in the home icon. i fixed it -

Note: both SVGs have height width props in there

Jdlrobson set the point value for this task to 2.
Jdlrobson removed a project: Patch-For-Review.

Talked with @bmansurov post-merge and we estimated this as a 1-2 (went for the larger more conservative estimate). We should check this in IE8 to sign off.

Change 364509 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Update main menu icons

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

bmansurov removed bmansurov as the assignee of this task.Jul 11 2017, 11:19 PM
bmansurov added a subscriber: bmansurov.
Jdlrobson reassigned this task from Nirzar to ABorbaWMF.Jul 13 2017, 5:08 PM

Hey! We'd like some reassurance how this looks in IE8, Opera Mini, Chrome. We only planned to fix IE8 but we'd like to get an idea of how the menu works in different browsers.

Jdlrobson moved this task from Backlog to Bugs on the MobileFrontend board.Jul 13 2017, 5:56 PM

Tested on the beta cluster. The icons are no longer stretched.

Noticed a problem with the Wikipedia beta logo though...

yay!

Noticed a problem with the Wikipedia beta logo though...

That's captured in T166684 but thanks for checking!

@Nirzar did you want some feedback on Opera Mini/UTC or did we decide to do that later as part of a bigger analysis of those browsers? If not feel free to sign off.

Nirzar closed this task as Resolved.Jul 14 2017, 6:08 PM

@Jdlrobson i will do a follow up with @ABorbaWMF separately!

Signing this off