New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 737569 link

Starred by 7 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

Material design icon font is rendered with suboptimal smoothing settings

Reported by juani...@gmail.com, Jun 28 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

Example URL:
https://google.github.io/material-design-icons/

Steps to reproduce the problem:
1. Look for material icons font in font-size: 18px

What is the expected behavior?

What went wrong?
in 18px of font size (a recommended size) the icons are losing sharpness, and the circles are being cutted

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes 58

Does this work in other browsers? Yes

Chrome version: 59.0.3071.115  Channel: stable
OS Version: 10.0
Flash Version:
 
Labels: Needs-Triage-M59 Needs-Bisect

Comment 2 by hdodda@chromium.org, Jun 29 2017

Cc: hdodda@chromium.org
Labels: Needs-Feedback
@juanir27-- Could you please provide us the sample url in which you are facing the rendering issue , as the url provided by you.. doesn't seem to have the url to reproduce the issue.Also help us by providing the expected and actual result screeshot for better understanding.

Thanks!

Comment 3 by juani...@gmail.com, Jun 29 2017

Hi hdodda! As I faced the issue in a local environment I can't provide the URL, but please check the attached file with the actual result (chrome 59) vs the expected result (firefox dev edition 55).
rendering-sample.jpg
21.9 KB View Download
Project Member

Comment 4 by sheriffbot@chromium.org, Jun 29 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "hdodda@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 5 by e...@chromium.org, Jun 29 2017

Cc: drott@chromium.org e...@chromium.org
Components: -Blink Blink>Fonts

Comment 6 by hdodda@chromium.org, Jun 30 2017

Labels: Needs-Feedback
Thanks for response ..

@juanir27-- Try providing us a sample testcase/ jsfiddle , where we can reproduce the issue , that would help us in triaging the issue.

Thanks!
Project Member

Comment 8 by sheriffbot@chromium.org, Jun 30 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "hdodda@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Cc: rbasuvula@chromium.org
Labels: Needs-Feedback
Tested in chrome # 59.0.3071.115 on win 10.0 and not able to reproduce the issue.Please find the screen shots for your reference.

@Reporter: Could you please let me know if i have missed anything and if possible,Please create new profile without extensions and apps.Re-check once and let us know the observations of the issue which would help us to triage the issue further.

Thanks in Advance.
737569.PNG
244 KB View Download
Hello, we got the same problem as you can see on the screenshot provided. It seems that the aliasing problem occurs under 21 pixels.
Capture.PNG
33.3 KB View Download
(Tested in chrome # 59.0.3071.115 on win 10.0)
@rbasuvula I see exactly the same as above. Probably you don't see it because of the pixel density in your monitor. I am using a 22" Dell Monitor.
Project Member

Comment 13 by sheriffbot@chromium.org, Jul 4 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "rbasuvula@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
I am using a 22" LG
Labels: -Needs-Bisect hasbisect-per-revision
Owner: drott@chromium.org
Status: Assigned (was: Unconfirmed)
As per comment #12 & 14
Tested in chrome stable #59.0.3071.115 and canary #61.0.3149.0 on Win 10.0 able to reproduce the issue.
Below are the Bisect Details:

Bisect Info:
=============
Good Build: 59.0.3053.0 (Revision - 459685)
Bad Build: 59.0.3054.0 (Revision - 459950)

Bisect URL:
=========== 
You are probably looking for a change made after 459770 (known good), but no later than 459771 (first known bad).
CHANGELOG URL:
https://chromium.googlesource.com/chromium/src/+log/dd547f46cfb46ea92f554aa842d06bde19ceef6e..5fd631a31c688954834fc1e297a67b4b1a4f08bc

From the CL above, assigning the issue to the concern owner

@drott: Could you please look into the issue, pardon me if it has nothing to do with your changes and if possible please assign it to concern owner.

Reviewed-on: https://chromium-review.googlesource.com/458377

Note : Unable to reproduce the issue on Ubuntu 14.04 and Mac 10.12.5.
Cc: bunge...@chromium.org
Summary: Material design icon font is rendered with suboptimal smoothing settings (was: Bad font rendering)
The screenshots look like in the "before" case the material design icon font was rendered with ClearType symmetric smoothing, where as after it is higher vertical contrast but leads to tops and bottoms of circles appearing as jagged. 

The Material design icon fonts in the iconfont/ folder from the material design GitHub repository have a GASP table that is only configured with a value of 0x2 for GASP table version 0. In our implementation, this leads to disabling symmetric smoothing for this font. 

The material design icon font should be fixed to have an up to date GASP table to restore symmetric smoothing rendering. 

<?xml version="1.0" encoding="UTF-8"?>
<ttFont sfntVersion="\x00\x01\x00\x00" ttLibVersion="3.18">

  <gasp>
    <gaspRange rangeMaxPPEM="65535" rangeGaspBehavior="2"/>
  </gasp>

</ttFont>


Also, we can consider hardcoding the rendering mode for this font on Windows.

Filed as an issue on the Material Design icon font https://github.com/google/material-design-icons/issues/855

Sign in to add a comment