New issue
Advanced search Search tips

Issue 845100 link

Starred by 2 users
Status: WontFix
Owner: ----
Closed: May 2018
Cc:
viswa.karala@chromium.org
phanindra.mandapaka@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

Segoe UI Emoji color glyphs don't display correctly at large sizes

Reported by oregongr...@gmail.com, May 21 2018 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

Example URL:
https://eosrei.github.io/emojione-color-font/full-demo.html

Steps to reproduce the problem:
1. Navigate to any page with color emoji, eg. https://eosrei.github.io/emojione-color-font/full-demo.html
2. Inspect element in Devtools, make sure font-family is set to "Segoe UI Emoji", and start increasing the font-size property of the emoji.
3. Notice that at large sizes (font-size > 225px on my current display, probably varies) all emoji begin looking ugly/pixelated and displaying incorrectly.

What is the expected behavior?
The emoji should scale smoothly and look nice.

What went wrong?
It appears that horizontal slices of the emoji are being scaled differently. Distinctive horizontal lines are visible at fixed heights on the page that are almost certainly multiples of 256px. (Vertical lines are also sometimes visible.)

In addition, what is displayed changes if something is selected: some emoji may display (without the glitch) in black and white (probably Segoe UI Symbol font).

However, when emoji are selected and dragged, the preview displays smoothly and correctly. This is how it should look. (Except that past a certian size the previews show in black and white, not color; see issue #625191.)

Finally, if a large font-size (eg 300px) is entered via backspace+typing then other emoji may display in the space at smaller size and upside-down. (Strangely, this seems not to work if the font-size is changed via arrow keys.) (The emoji shown this way are likely dependent on the emoji present in the specific webpage.)

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 66.0.3359.181  Channel: stable
OS Version: 10.0.16299.431
Flash Version: 

The emoji are displayed correctly at large sizes in Edge.
Also affects my laptop with exactly the same Windows/Chrome version, as well as Guest Profile (so not caused by flags/extensions etc or a single corrupted computer.)
Segoe UI Emoji version 1.15

Possibly related to bug #501071.
As in bug #719648, I noticed emoji not displaying above a certain size (325px.)
01_Smooth_at_font-size_200px.png
295 KB View Download
02_Emojis_looking_bad.png
217 KB View Download
03_Emojis_looking_bad_2.png
185 KB View Download
04_Emojis_looking_bad_3.png
224 KB View Download
05_Before_selection_on_line.png
230 KB View Download
06_Selected_glyph_displays_correctly_but_blackandwhite.png
235 KB View Download
07_Selected_glyph_sometimes_stays_that_way_after_unselected.png
234 KB View Download
08_Selection_on_line_unpredictably_makes_glyph_blackandwhite.png
234 KB View Download
09_Vertical_line_example.png
124 KB View Download
10_Click_drag_is_smooth.png
367 KB View Download
11_Click_drag_is_smooth_2.png
309 KB View Download
12_What_the_heck_is_this.png
267 KB View Download
13_What_the_heck_is_this_2.png
249 KB View Download
14_What_the_heck_is_this_3.png
281 KB View Download

Comment 1 by schenney@chromium.org, May 21 2018

Components: -Blink Internals>Compositing
These look like tiling artifacts.

In DevTools, under the 3-dot menu, More Tools, Rendering enable tile boundary drawing and send us a screen shot (or just let us know if the tearing aligns with tile boundaries).

Comment 2 by oregongr...@gmail.com, May 21 2018 

Yes, it does look like it aligns with the tile boundaries.

Comment 3 by sindhu.chelamcherla@chromium.org, May 21 2018

Labels: Needs-Triage-M66

Comment 4 by viswa.karala@chromium.org, May 22 2018

Labels: Triaged-ET Needs-Feedback
Tested the issue on chrome reported version 66.0.3359.181 using Windows-10 with steps mentioned below:
1) Launched chrome reported version and navigated to URL: https://eosrei.github.io/emojione-color-font/full-demo.html
2) Opened Devtools > Elements tab and kept font-family to "Segoe UI Emoji"
3) Tried increased the size in "font-size" element, but after increasing the "Emoji" got disappear

@Reporter: Please find the attached screencast for your reference and let us know if we missed anything in reproducing the issue, if possible could you please provide screencast of the issue which help in better understanding.

Thanks!
845100.mp4
1.2 MB View Download

Comment 5 by oregongr...@gmail.com, May 22 2018 

All I can say is that it may affect devices with different screen sizes at different font-sizes. On my laptop, I see the problem starting when font-sixe is set to 150px, and the emoji disappear above 216px.
(Both my laptop and desktop have 1920x1080 resolution, but my laptop has 150% Scale and Layout in Windows Settings. 150px*150% = 225px, 216px*150% = 324px, so it looks like what's important is the actual size )

I would suggest using the arrow keys when font-size is selected to slowly increase it until you either see a problem, or the emoji disappear without seeing a problem. Either that or set it to a high value and then decrease the font-size with arrow keys until the emoji reappear.
Project Member

Comment 6 by sheriffbot@chromium.org, May 22 2018

Cc: viswa.karala@chromium.org
Labels: -Needs-Feedback
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

Comment 7 by phanindra.mandapaka@chromium.org, May 25 2018

Cc: phanindra.mandapaka@chromium.org
Labels: Needs-Feedback
As per comment #5 able to reproduce this issue on reported chrome version 66.0.3359.181 using Windows 10.

@Reproter:This issue seems to be already fixed in the latest M-67 which will be rolling out to stable soon. Please check the same on the latest beta and let us know.

Please Download chrome:The latest chrome builds can be downloaded from the below URL:
https://www.chromium.org/getting-involved/dev-channel

Thanks.!

Comment 8 by oregongr...@gmail.com, May 25 2018 

Checked on "67.0.3396.56 (Official Build) beta (64-bit)", and it looks like this issue is fixed. Thanks!!
Project Member

Comment 9 by sheriffbot@chromium.org, May 25 2018

Labels: -Needs-Feedback
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

Comment 10 by sindhu.chelamcherla@chromium.org, May 29 2018

Status: WontFix (was: Unconfirmed)
As per comment#8 closing this issue as wont-fix.

Thanks!
►

Sign in to add a comment