New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 21 users
Status: Duplicate
Owner:
Closed: Jun 2012
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 2
Type: Bug

Restricted
  • Only users with Commit permission may comment.



Sign in to add a comment
Bold font sometimes overlaps (width error?) on Linux with MS fonts.
Reported by acooke....@gmail.com, Sep 17 2011 Back to list
Chrome Version       : 13.0.782.215
OS Version: 
URLs (if applicable) :
Other browsers tested:
  Add OK or FAIL after other browsers where you have tested this issue:
     Safari 5:
  Firefox 4.x:
     IE 7/8/9:

What steps will reproduce the problem?
1. Currently I see this on the front page of the BBC - it crops up from time to time all over the place and I've been noticing it for a month or two.  See the enclosed image
2.
3.

What is the expected result?

The text should not overlap.

What happens instead?

The text overlaps (see the "NEW" next to the "Casualties in US Air Race" link).

However, this is intermittent.  Sometimes I can load the page and it will look fine.  I have that same page in two tabs.  One is fine, the other has the overlap.  The identical same page.  I cannot work out what makes it appear and what not.

Please provide any additional information below. Attach a screenshot if
possible.

UserAgentString: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.215 Safari/535.1

I've included a screen shot of the tab with the error; the tab without the error; my KDE font config; the Chrome developer tool showing the info for the "NEW".

 
chrome-font-config.png
90.4 KB View Download
chrome-bad.png
568 KB View Download
chrome-dev.png
441 KB View Download
chrome-good.png
569 KB View Download
I wasn't very clear on where the error is in the image.  It's the first link on the left after (below) the images.  On the "bad" tab it overlaps with "NEW"; on the "good" tab it does not.
Comment 2 by tkent@chromium.org, Sep 19 2011
Labels: -Area-Undefined Area-WebKit WebKit-Fonts
I can confirm I see the same or a very similar issue.  I am a web developer working primarily on Linux and I use Chrome as my initial development target.  I'm using Chrome 14.0.835.163.

It appears to me that this may be loading related, as I only see the issue when I am first loading a page.  After that, I can browse the site and I won't see the issue.  So, the fastest way I have found to reproduce it is to shift-reload a page over and over.
A follow-up comment with a couple more details:
* As far as I can tell, the issue does not seem to occur on Windows builds of Chrome.
* I don't believe the issue is specifically related to MS fonts.  The page I can most reliably reproduce the issue on here uses only various faces of the font Open Sans, loaded via @font-face.

Unfortunately I can't provide a link to this page as it's from an unlaunched site.  

Comment 5 by kareng@google.com, Sep 21 2011
Owner: bashi@chromium.org
Status: Assigned
bashi any ideas?
Another detail.  In my particular case, I have traced this down to a particular css property: "text-rendering: optimizeLegibility".  I previously had this property enabled on the body; if I comment it out, I can no longer reproduce the issue.

This may make the problem I was encountering a separate issue from the original reported problem, unless that BBC page can be shown to be using he same property.
Hi.  I found a much better example.  This site http://nikcub.appspot.com/logging-out-of-facebook-is-not-enough was a complete mess when I first loaded it today.  The main body contains various sections of styled text (in the first few paras - the link, bold, monospace).  They were all overlapping/poorly kerned.

Reloading the page (ctrl-R) fixed everything.

Loading the same URL into a new tab (not reloading in the same tab) shows the issue about half the time.
Looking some more, the first para even overflows and ends up behind the author image.  And the italic text is also incorrect.
And the css body does use text-rendering: optimizeLegibility;
Comment 10 by bashi@chromium.org, Sep 26 2011
Cc: rniwa@chromium.org
I confirmed the problem with 15.0.874.21, but it looks like the problem was fixed on WebKit ToT. At the first page loading, http://nikcub.appspot.com/logging-out-of-facebook-is-not-enough was displayed as mentioned in comment #7, but after that, it seems that re-layout was occurred and the contents were displayed as expected.

I'm guessing there are changes in layout/style recalculation recently, but I have little knowledge of layout. rniwa, do you have any ideas?
Comment 11 by rniwa@chromium.org, Sep 26 2011
Cc: tkent@chromium.org tony@chromium.org
I bet this is something to do with font metrics calculation in WebCore/platform/graphics. Maybe tony or tkent know recent changes in this area. Too bad Evan is on leave now. He would probably know any changes that happened in this area.
if it's any help i was seeing this problem over 38 days ago.

i know because i made this comment - http://news.ycombinator.com/item?id=2903557 - and i would guess i had seen the same issue for a few weeks before then too.
I can confirm seeing the same issue on several site; most recently on http://raphaeljs.com/

This issue doesn't always come up. Usually, refreshing the page fixes the problem. I've checked that raphaeljs.com does use "text-rendering: optimizeLegibility".

I'm running:
Google Chrome 14.0.835.186 (Official Build 101821)
WebKit:	535.1 (branches/chromium/835@94713)
OS: Ubuntu 10.04 32 bit
Chrome's Command Line:	 /opt/google/chrome/google-chrome --flag-switches-begin --enable-click-to-play --no-pings --enable-shortcuts-provider --ppapi-flash-in-process --preload-instant-search --enable-print-preview --restrict-instant-to-search --flag-switches-end

Please let me know if you require any other information.
chrome-issue-96936.png
132 KB View Download
Comment 14 by demia...@gmail.com, Oct 25 2011
I'm having the same issue using TweetDeck, bold font overlaps normal font despite using various font families...
Comment 15 by Deleted ...@, Dec 1 2011
Same issue using TweetDeck. Hopefully Resfreshing the page will fix the issue. This is not related to the font type because I tried many standard fonts and the issue is still there. Using ubuntu 11.04
I'm having the same problem on my blog and tracked it down to optimizelegibility. I find that the strength of the effect varies by font - Ubuntu Mono shows the problem particularly badly.

Attached a simple example (test.html) and screen-shot of how it renders for me in Chrome 16.0.912.41 beta on Ubuntu 11.10.

Open a new tab and drag the test.html file to it - you should see the "t" of "this" overlapping the "e" of the preceding "like". Hit F5 and the problem goes away.
test.html
480 bytes View Download
font-legibility-bug.png
53.1 KB View Download
Comment 17 by Deleted ...@, Jan 19 2012
I'm also having the same problem on a site I'm currently working on. The width of my labels seem to be broken and are overlapped by input fields (capture1.png). And the width of some links is broken too. When hovering, the hover animation just changes half of the text (capture2.png).

Firefox 9, IE 9 and Opera 11.60 have no problems.
capture2.png
1.6 KB View Download
capture1.PNG
6.7 KB View Download
Version: 18.0.1025.162

I'm still seeing this issue with Linux Mint 12 (based on Oneiric). Attached a screenshot of http://nikcub.appspot.com/logging-out-of-facebook-is-not-enough which shows multiple instances of the overlap.
chrome-font-overlap.png
104 KB View Download
Similar issues on many sites using web fonts. After certain actions the problem fixes itself (eg if element is inspected using Debugger)

18.0.1025.151 (Developer Build 130497 Linux) Ubuntu 12.04
Mergedinto: 66073
Status: Duplicate
Looks like a dup of issue 66073
Project Member Comment 21 by bugdroid1@chromium.org, Oct 13 2012
Labels: Restrict-AddIssueComment-Commit
Mergedinto: chromium:66073
This issue has been closed for some time. No one will pay attention to new comments.
If you are seeing this bug or have new data, please click New Issue to start a new bug.
Project Member Comment 22 by bugdroid1@chromium.org, Mar 11 2013
Labels: -Area-WebKit -WebKit-Fonts Cr-Content Cr-Content-Fonts
Project Member Comment 23 by bugdroid1@chromium.org, Apr 6 2013
Labels: -Cr-Content Cr-Blink
Project Member Comment 24 by bugdroid1@chromium.org, Apr 6 2013
Labels: -Cr-Content-Fonts Cr-Blink-Fonts
Sign in to add a comment