User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

1. Encounter the "Keycap Asterisk" emoji in a sentence anywhere.

Real world bug: https://phabricator.wikimedia.org/phame/live/1/post/173/production_excellence_september_2019/
Isolated test case: https://codepen.io/Krinkle/pen/GRgdrEw?editors=1100
Character info: https://emojipedia.org/keycap-asterisk/

Actual results:

Its rendering appears to be glitched in a way that it is offset to the left and takes up 0 horizontal space.

The outcome is that its left half is cut off,
and its right side is overlapping unrelated characters.

Expected results:

It should be rendered in its entirely and take up the space that it visually takes up.

This seems to work correctly in Safari and Chromium.

Reproducible on Windows 10 x64 and on macOS 10.14 on the latest Firefox Nightly 74.0a1, Firefox 73.0b4 and on Firefox 72.0.1.

Still reproducible on 74.0a1 (2020-01-13) (64-bit) but now the box is no longer clipped offscreen, instead the star inside of it is misaligned (flush left instead of centered).

This is basically an issue with font selection; if you explicitly style the text with font-family: Apple Color Emoji (on macOS; presumably using Segoe UI Emoji would work on Windows but I haven't yet tested this) it appears correctly, but without that, font fallback is picking a symbol font that doesn't render the keycap combination nicely: we get the asterisk rendered from the normal text font, and then an overstriking zero-width keycap box from a fallback font.

Fixing bug 543200 would probably help here.

The component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.

(In reply to Bert Peers [:bpeers] from comment #5)

Still reproducible on 74.0a1 (2020-01-13) (64-bit) but now the box is no longer clipped offscreen, instead the star inside of it is misaligned (flush left instead of centered).

On Firefox 78 it is still, or again, clipped off-screen.

Test case:
https://codepen.io/Krinkle/pen/GRgdrEw

This is fixed by bug 1371386.