web.microsoftstream.com - "Search" icon is displayed misaligned in "Select group" field

[softvision-oana-arbuzov]

URL: https://web.microsoftstream.com/

Browser / Version: Firefox Nightly 96.0a1 (2021-11-24) Operating System: Windows 10 Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items are misaligned

Prerequisites: Signed in with Microsoft Enterprise account.

Steps to Reproduce:

1. Navigate to https://web.microsoftstream.com/
2. Click "Create" button from top bar menu.
3. Select "Channel" option.
4. After "Create a channel" popup is displayed, observe "Select group" field.

Expected Behavior: The "Search" icon is correctly aligned (centered).

Actual Behavior: The "Search" icon is misaligned.

Notes:

1. Screenshot attached.
2. The issue is not reproducible on Chrome.

Watchers: @softvision-oana-arbuzov @softvision-raul-bucata

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[denschub]

This is a very minor visual difference that we usually don't look at, but I've seen quite a few instances of icon-fonts being slightly misplaced, and this can be annoying over time. So let's look into it. :)

In Chrome, the icon itself is 16x16px wide, while in Firefox, it's 16x19.2px. The container, the <button> element, has the same dimensions in both browsers, so this is something related to how the font is rendered. The icon has

.c-search button::before {
    content: "";
    text-indent: 0;
    font-size: 16px;
}

and unfortunately, nothing ever sets the line-height, not even the @font-face rule. The default value is line-height: normal;, and this is completely browser-dependent. An easy fix for that would be to follow what other iconfonts like FontAwesome are doing, and set the default line-height to 1. In this example, having https://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.4.0/css/mwf-west-european-default.min.css changed to say

.c-glyph::after, .c-glyph::before, .glyph::after, .glyph::before {
  font-family: MWF-MDL2;
  display: inline-block;
  line-height: 1;
}

will result in the rendering be consistent in all browsers. I'll suggest as much via email.