Open softvision-oana-arbuzov opened 2 years ago
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.
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:
Expected Behavior: The "Search" icon is correctly aligned (centered).
Actual Behavior: The "Search" icon is misaligned.
Notes:
Watchers: @softvision-oana-arbuzov @softvision-raul-bucata
View the screenshot
Browser Configuration
From webcompat.com with ❤️