Keycap emojis in Firefox are cut off on the left and overlap to the right [due to failure to select suitable font for the whole cluster]
Categories
(Core :: Layout: Text and Fonts, defect, P4)
Tracking
()
People
(Reporter: krinkle, Unassigned)
References
Details
(Keywords: fonts, reproducible)
Attachments
(5 files)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:72.0) Gecko/20100101 Firefox/72.0
Steps to reproduce:
- 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.
Reporter | ||
Comment 1•5 years ago
|
||
Reporter | ||
Comment 2•5 years ago
|
||
Reporter | ||
Comment 3•5 years ago
|
||
Comment 4•5 years ago
|
||
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.
Comment 5•5 years ago
|
||
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).
Comment 6•5 years ago
|
||
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.
Comment 7•5 years ago
|
||
The component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.
Updated•5 years ago
|
Reporter | ||
Comment 8•4 years ago
|
||
(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.
Updated•4 years ago
|
Description
•