Emojis not aligned
Reported by
berk...@gmail.com,
Nov 23
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36 Steps to reproduce the problem: 1. Create a div with flex, align-items: center and justify-content:center with fixed width and hight(e.g. 32px) 2. Put a emoji in the div 3. open browse, emoji should be centered both directional but it is not (safari on mac can render this properly) What is the expected behavior? It should act like an inline text, bounding box of the emoji should match with emaoji itself What went wrong? I dont know Did this work before? N/A Chrome version: 70.0.3538.110 Channel: stable OS Version: OS X 10.14.1 Flash Version:
,
Nov 23
you can easily setup http://github.com/doubco/react-scenes within a empty react project (cra etc.) with npm i react-scenes@beta . sorry I can't just give a simple html file.
,
Nov 23
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Nov 25
,
Nov 26
I think you need to apply text-align:center to all the flex items in order to get the effect you want (justify-content will just align the flex items within the felx container). The glyphs may have different widths, and will be left-aligned within the fixed-size flex item. Safari on Mac may be using a different font where all glyphs have identical or very similar width, maybe? If you have a testcase/demo/whatever that clearly demonstrates the difference between Chrome and Safari, feel free to upload it or refer to it.
,
Nov 27
If you look closely the only problem isn't horizontal alignment but also vertical, I tested it with text-align:center but still looks like a rendering issue. I tested both safari and firefox, indeed emoji size is relative to browser but they managed to center both vertically and horizontally. |
||||
►
Sign in to add a comment |
||||
Comment 1 by dtapu...@chromium.org
, Nov 23Labels: Needs-Feedback