New issue
Advanced search Search tips

Issue 708604 link

Starred by 11 users

Issue metadata

Status: Duplicate
Merged: issue 774302
Owner:
Closed: Sep 28
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Can't render the facepalm emoji properly (🤦🏻‍♂️)

Reported by felipe...@gmail.com, Apr 5 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Have the facepalm emoji in a regular HTML element (🤦🏻‍♂️)
2. It seems to fail to combine the code points and renders with an extra character that's the unicode for the gender

What is the expected behavior?
It should render just the emoji character

What went wrong?
See attached image. On the left you can see how it renders in Chrome and on the right how it renders in Safari

Does it occur on multiple sites: Yes

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 57.0.2987.133  Channel: stable
OS Version: OS X 10.12.4
Flash Version: 

Now while I'm reporting the bug in this form, it seems to work properly in textarea elements, but wrongly in input elements.

As Slack for desktop also uses Chromium, I can reproduce it there too.
 
emoji.png
8.9 KB View Download

Comment 1 Deleted

Comment 2 Deleted

Open this very same page in Chrome and Safari, and you can see the difference on the title.
Screen Shot 2017-04-05 at 18.57.19.png
240 KB View Download
To make it even more interesting, here's how it looks in other apps that use Chromium (Spotify and Slack - and I guess Slack might be using an older version of Chromium)
Spotify.png
63.4 KB View Download
Slack.png
14.7 KB View Download
Components: -Blink Blink>Fonts>Emoji
I think there might be something more going on here (localization or language preferences perhaps?). I see the attached in Chrome 57.0.2987.133 and Safari 10.0.1 (12602.2.14.0.7) on macOS 10.12.1.
Screen Shot 2017-04-05 at 12.24.55 PM.png
205 KB View Download

Comment 7 Deleted

Police woman (👮🏻‍♀️) is also broken (again, it renders properly inside a <textarea/>)
Labels: Needs-Triage-M57

Comment 10 by e...@chromium.org, Apr 6 2017

Owner: drott@chromium.org
Status: Assigned (was: Unconfirmed)
Perhaps related b/38000924

Comment 12 by hszqq...@gmail.com, Oct 13 2017

Emoji rendering in <textarea> element is also broken.

Chrome: 61.0.3163.100 stable
macOS: 10.13
E30A4BAB-CEC7-4F54-8B28-8D2A08247009.png
20.6 KB View Download

Comment 13 by hszqq...@gmail.com, Feb 26 2018

Weird, <pre> is fine while <span> is broken. <textarea> here is fine, <textarea> on GitHub is broken.

Chrome: 64.0.3282.186
macOS: 10.13.3
93B131CE-A427-40A7-ABC3-43A3539A0C98.png
88.4 KB View Download
This is also a problem on Linux (Fedora 27 desktop, to be precise).
still broken on Chrome 68, Windows 10
Labels: Hotlist-Interop
The title of this bug itself is a good testcase. Edge, Firefox and Safari all show it correctly, so adding Hotlist-Interop to track.
On my Windows 7, I see two rectangles and a male sign.
unknown-characters-in-facepalm-emoji.PNG
1.9 KB View Download
Mergedinto: 774302
Status: Duplicate (was: Assigned)
Discussion and analysis has progressed in  issue 774302 , fix strategy discussed there as well.

#18 - do you want a separate issue for #17 or is it covered in  issue 774302 ?
(Or is it WontFix?)
It's the same, the problem is that a font higher up in the font stack "takes" the female and male signs if it has coverage for them, then the rest of the combined emoji does not render correctly anymore.

Project Member

Comment 21 by bugdroid1@chromium.org, Oct 8

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d82e0b921990a9ad2a3237e6617f629ccb0812f8

commit d82e0b921990a9ad2a3237e6617f629ccb0812f8
Author: Dominik Röttsches <drott@chromium.org>
Date: Mon Oct 08 16:35:27 2018

Improve inspector-protocol font identification tests

Wait for fonts to be loaded completely, simplify test output logging
code by using map() instead of loop.

Bug:  708604 
Change-Id: Icdca037eb20badb249d10c71b1d98bd6aaae0419
Reviewed-on: https://chromium-review.googlesource.com/c/1268275
Commit-Queue: Emil A Eklund <eae@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#597584}
[modify] https://crrev.com/d82e0b921990a9ad2a3237e6617f629ccb0812f8/third_party/WebKit/LayoutTests/inspector-protocol/layout-fonts/resources/layout-font-test.js

Project Member

Comment 22 by bugdroid1@chromium.org, Oct 25

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/eb966cb2760ec88411905bfb820da98200c0a984

commit eb966cb2760ec88411905bfb820da98200c0a984
Author: Dominik Röttsches <drott@chromium.org>
Date: Thu Oct 25 10:06:41 2018

Add NotoColorEmoji to LayoutTest third-party fonts

We need a wide coverage, cross-platform compatible emoji font to test
emoji issues in layout tests, for example emoji cluster fallback, see
 issue 708604 . Using Google's own Noto Color Emoji, which is also used on
Android, is the most convenient source.

Tbr'ing since this font is imported from the Google
Noto Color Emoji project.

Bug:  708604 
Change-Id: Ic5cbc4b85633c383726f2fe9f29274c7080886ed
Tbr: feinberg@chromium.org, jrn@google.com
Reviewed-on: https://chromium-review.googlesource.com/c/1268199
Commit-Queue: Dominik Röttsches <drott@chromium.org>
Reviewed-by: Dominik Röttsches <drott@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#602659}
[add] https://crrev.com/eb966cb2760ec88411905bfb820da98200c0a984/third_party/WebKit/LayoutTests/third_party/NotoColorEmoji/LICENSE
[add] https://crrev.com/eb966cb2760ec88411905bfb820da98200c0a984/third_party/WebKit/LayoutTests/third_party/NotoColorEmoji/NotoColorEmoji.ttf
[add] https://crrev.com/eb966cb2760ec88411905bfb820da98200c0a984/third_party/WebKit/LayoutTests/third_party/NotoColorEmoji/README.chromium

Project Member

Comment 23 by bugdroid1@chromium.org, Oct 26

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b181bb77ec819719cefe74fe9c144cf3983b74d8

commit b181bb77ec819719cefe74fe9c144cf3983b74d8
Author: Dominik Röttsches <drott@chromium.org>
Date: Fri Oct 26 09:06:31 2018

Roll HarfBuzz to contain emoji cluster formation

Contains 2346cb3742fe0f8cfafe8c36a4bd5 and other commits that help with
forming clusters for emoji sequences.

Add a test to Blink layout tests ensuring that male/female sign
sequences are no longer broken up if the primary font contains
male/female sign characters.

Bug:  708604 
Change-Id: I34d22a48ec8e4a9a627b12c68efefaabdcd015c7
Reviewed-on: https://chromium-review.googlesource.com/c/1264519
Commit-Queue: Dominik Röttsches <drott@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#603037}
[modify] https://crrev.com/b181bb77ec819719cefe74fe9c144cf3983b74d8/DEPS
[add] https://crrev.com/b181bb77ec819719cefe74fe9c144cf3983b74d8/third_party/WebKit/LayoutTests/inspector-protocol/layout-fonts/emoji-cluster-fallback-expected.txt
[add] https://crrev.com/b181bb77ec819719cefe74fe9c144cf3983b74d8/third_party/WebKit/LayoutTests/inspector-protocol/layout-fonts/emoji-cluster-fallback.js
[modify] https://crrev.com/b181bb77ec819719cefe74fe9c144cf3983b74d8/third_party/harfbuzz-ng/BUILD.gn
[modify] https://crrev.com/b181bb77ec819719cefe74fe9c144cf3983b74d8/third_party/harfbuzz-ng/README.chromium

Project Member

Comment 24 by bugdroid1@chromium.org, Oct 29

Labels: merge-merged-3578
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/746156f503ddf75d5037574c27889eb0030e37f6

commit 746156f503ddf75d5037574c27889eb0030e37f6
Author: Dominik Röttsches <drott@chromium.org>
Date: Mon Oct 29 21:10:29 2018

Roll HarfBuzz to contain emoji cluster formation

Contains 2346cb3742fe0f8cfafe8c36a4bd5 and other commits that help with
forming clusters for emoji sequences.

Add a test to Blink layout tests ensuring that male/female sign
sequences are no longer broken up if the primary font contains
male/female sign characters.

TBR=drott@chromium.org

(cherry picked from commit b181bb77ec819719cefe74fe9c144cf3983b74d8)

Bug:  708604 
Change-Id: I34d22a48ec8e4a9a627b12c68efefaabdcd015c7
Reviewed-on: https://chromium-review.googlesource.com/c/1264519
Commit-Queue: Dominik Röttsches <drott@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#603037}
Reviewed-on: https://chromium-review.googlesource.com/c/1306354
Reviewed-by: Dominik Röttsches <drott@chromium.org>
Cr-Commit-Position: refs/branch-heads/3578@{#375}
Cr-Branched-From: 4226ddf99103e493d7afb23a4c7902ee496108b6-refs/heads/master@{#599034}
[modify] https://crrev.com/746156f503ddf75d5037574c27889eb0030e37f6/DEPS
[add] https://crrev.com/746156f503ddf75d5037574c27889eb0030e37f6/third_party/WebKit/LayoutTests/inspector-protocol/layout-fonts/emoji-cluster-fallback-expected.txt
[add] https://crrev.com/746156f503ddf75d5037574c27889eb0030e37f6/third_party/WebKit/LayoutTests/inspector-protocol/layout-fonts/emoji-cluster-fallback.js
[modify] https://crrev.com/746156f503ddf75d5037574c27889eb0030e37f6/third_party/harfbuzz-ng/BUILD.gn
[modify] https://crrev.com/746156f503ddf75d5037574c27889eb0030e37f6/third_party/harfbuzz-ng/README.chromium

Labels: CommitLog-Audit-Violation Merge-Without-Approval M-71
Here's a summary of the rules that were executed: 
 - OnlyMergeApprovedChange: Rule Failed -- Revision 746156f503ddf75d5037574c27889eb0030e37f6 was merged to refs/branch-heads/3578 branch with no merge approval from a TPM! 
Please explain why this change was merged to the branch!
 - AcknowledgeMerge: Notification Required -- 
Labels: Merge-Merged-71-3578
The following revision refers to this bug: 
https://chromium.googlesource.com/chromium/src.git/+/746156f503ddf75d5037574c27889eb0030e37f6

Commit: 746156f503ddf75d5037574c27889eb0030e37f6
Author: drott@chromium.org
Commiter: drott@chromium.org
Date: 2018-10-29 21:10:29 +0000 UTC

Roll HarfBuzz to contain emoji cluster formation

Contains 2346cb3742fe0f8cfafe8c36a4bd5 and other commits that help with
forming clusters for emoji sequences.

Add a test to Blink layout tests ensuring that male/female sign
sequences are no longer broken up if the primary font contains
male/female sign characters.

TBR=drott@chromium.org

(cherry picked from commit b181bb77ec819719cefe74fe9c144cf3983b74d8)

Bug:  708604 
Change-Id: I34d22a48ec8e4a9a627b12c68efefaabdcd015c7
Reviewed-on: https://chromium-review.googlesource.com/c/1264519
Commit-Queue: Dominik Röttsches <drott@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#603037}
Reviewed-on: https://chromium-review.googlesource.com/c/1306354
Reviewed-by: Dominik Röttsches <drott@chromium.org>
Cr-Commit-Position: refs/branch-heads/3578@{#375}
Cr-Branched-From: 4226ddf99103e493d7afb23a4c7902ee496108b6-refs/heads/master@{#599034}
Cc: gov...@chromium.org
govind@, sorry this ended up here because of the initial Bug: line in the original commit. Merge approved in  issue 774302 .
Labels: -Merge-Without-Approval
Thank you drott@.

This merge was approved here: https://bugs.chromium.org/p/chromium/issues/detail?id=774302&desc=3#c32. So removing "Merge-Without-Approval" label.

Sign in to add a comment