Summary

In Firefox 133 (currently Firefox Developer Edition, but I suspect the issue will also happen in the main Firefox version one release later), emoji in the emoji picker are far too small.

Steps to reproduce

• Install Firefox Developer Edition (Nightly might also work)
• Open Mattermost in the browser
• Open the emoji selector

Operating System

Arch Linux

Mattermost Server Version

9.11.1 (Build Number: 10419911144)

Expected behavior

The emoji should have a reasonable size, as they do on Firefox 132 (current main version):

Observed behavior

They are tiny.

Log Output

N/A

Additional Information

This seems to be due to some different interpretation of CSS. In Firefox 132, the CSS is shown like this:

The -moz-transform: scale(0.35) is apparently ignored, so only the zoom has an effect. By contrast, in Firefox 133 it looks like this:

Presumably, the -moz-transform: scale(0.35) now stacks with the zoom: .35, so the emoji are scaled down twice.

(These styles are for non-selected emoji; selected ones have slightly different styles, but I think the issue is similar.)

Possible fixes

Remove the -moz-transform from _emojisprite.scss? But probably use git blame to find out why it’s there first :)

Arguably, this could be considered a Firefox issue, but I think it’s more likely Mattermost’s responsibility to use the -moz-* property correctly.