I just discovered that our app does not display certain images correctly in Firefox. A little digging showed the cause - Atlaskit brings the following CSS snippet to the table, seemingly from a file called browser-fixes.js
in the distribution, imported with import '@atlaskit/css-reset'
:
/* Suppress the ugly broken image styling in Firefox */
@-moz-document url-prefix() {
img {
font-size: 0;
}
img:-moz-broken {
font-size: inherit;
}
}
We use height: 1em
on inline emoticons. This atlaskit CSS messes this up as images loose the context of the current font-size. I countered it by overwriting the CSS to a decent font-size: inherit
.
But in my opinion, atlaskit should not set this style on all images in Firefox. That’s too much, the fix should be more specific / qualified. I know that it’s a CSS reset, but having images with font-size: 0 seems like an unreasonable reset that more apps will stumble over.