axelboc
commented
7 years ago I remember having to deal with this in Pursuit as well. This is a known Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1149357 - setting the width and height attributes is the only workaround for now. But note that doing so is good practice anyway, since it allows the browser to allocate the right amount of space to the image before it finishes loading (i.e. before the browser can parse the image to know how wide and tall it is). When the width and height attributes are omitted, the content below the image moves down after the image has loaded, which can be very annoying (it happens way too much in the design system IMHO). Closing this, as there's not much we can do about it in the design system itself.
Obscure bug (initially posted in the wrong repo!).
Using logo-listing with srcset.
<img alt="Association of Pacific Rim Universities" src="./?a=2365209" srcset="./?a=2365209 1x, ./?a=2365209:v1$ 2x" />Works fine as far as displaying the appropriate image, but in Firefox the spacing is based on the pixel dimensions of the 2x version. See screen grab - Chrome above, Firefox below.
I've overridden this behaviour on the page I'm working on by simply adding width attributes to the image tags based on the natural sizes of the src image - hacky, but in this case, it works.