White outline on black emojis rendered unevenly

[leo60228]

Expected behaviour

I would expect that the white outline (introduced by #8597) on a circular emoji like 🎱 is rendered as a circle.

Actual behaviour

The shape is uneven.
Desktop Firefox (WebRender, AMD, Linux):

Unknown mobile browser (reported by another user):

Steps to reproduce the problem

Place the 🎱 emoji in a display name or message.

Specifications

This occurs on multiple instances. I'm using the v3.1.2 tag, but I don't see any change to the relevant code since it was introduced.

I'm using Firefox 73.0 on Linux with WebRender enabled. I'm not sure what browser the other user is using.

[leo60228]

This filter works by making 4 copies of the image, making them solid white, and then moving them in different directions. You can get the same artifacts by doing this in an image editor:

I can't find a way to outline SVGs in CSS that doesn't have this problem, though. The best option might be to just modify the SVGs themselves.

[leo60228]

Emojione has specifically chosen not to do this, but hasn't stated why. joypixels/emojione#234

[leo60228]

This svg filter has no artifacting on my browser. Note that the more obvious feMorphology also creates artifacts (as it will never go outside the bounds of the input, unlike feGaussianBlur). https://codepen.io/snuggles08/pen/BaoqjZJ

[ClearlyClaire]

@leo60228 very interesting, thanks! The SVG filters seem to give a pretty good result. I'm worried about performances because of the Gaussian blur filter… but on a quick test, this doesn't seem worse than our existing 4-drop-shadow filter thing.

[leo60228]

The drop shadow trick does four Gaussian blurs, though they each have a radius of 0. I'm not sure if browsers optimize for this case.

[ClearlyClaire]

@leo60228 thanks. Started to experiment a bit in a PR (#13769), the changes seem pretty inconsistent across browsers. I'd say they are mostly good though.