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: