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

Issue metadata

Status: Duplicate
Closed: Jun 2012
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 2
Type: Bug

  • Only users with Commit permission may comment.

Sign in to add a comment

Issue 96936: Bold font sometimes overlaps (width error?) on Linux with MS fonts.

Reported by, Sep 17 2011

Issue description

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

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

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".
90.4 KB View Download
568 KB View Download
441 KB View Download
569 KB View Download

Comment 1 by, Sep 17 2011

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, Sep 19 2011

Labels: -Area-Undefined Area-WebKit WebKit-Fonts

Comment 3 by, Sep 19 2011

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.

Comment 4 by, Sep 19 2011

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, Sep 21 2011

Status: Assigned
bashi any ideas?

Comment 6 by, Sep 21 2011

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.

Comment 7 by, Sep 25 2011

Hi.  I found a much better example.  This site 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.

Comment 8 by, Sep 25 2011

Looking some more, the first para even overflows and ends up behind the author image.  And the italic text is also incorrect.

Comment 9 by, Sep 25 2011

And the css body does use text-rendering: optimizeLegibility;

Comment 10 by, Sep 26 2011

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, 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, Sep 26 2011

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.

Comment 12 by, Sep 26 2011

if it's any help i was seeing this problem over 38 days ago.

i know because i made this comment - - and i would guess i had seen the same issue for a few weeks before then too.

Comment 13 by, Oct 2 2011

I can confirm seeing the same issue on several site; most recently on

This issue doesn't always come up. Usually, refreshing the page fixes the problem. I've checked that 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.
132 KB View Download

Comment 14 by, 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

Comment 16 by, Dec 14 2011

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.
480 bytes View Download
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.
1.6 KB View Download
6.7 KB View Download

Comment 18 by, Apr 29 2012

Version: 18.0.1025.162

I'm still seeing this issue with Linux Mint 12 (based on Oneiric). Attached a screenshot of which shows multiple instances of the overlap.
104 KB View Download

Comment 19 by, May 30 2012

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

Comment 20 by, Jun 4 2012

Mergedinto: 66073
Status: Duplicate
Looks like a dup of issue 66073

Comment 21 by, Oct 13 2012

Project Member
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.

Comment 22 by, Mar 11 2013

Project Member
Labels: -Area-WebKit -WebKit-Fonts Cr-Content Cr-Content-Fonts

Comment 23 by, Apr 6 2013

Project Member
Labels: -Cr-Content Cr-Blink

Comment 24 by, Apr 6 2013

Project Member
Labels: -Cr-Content-Fonts Cr-Blink-Fonts

Sign in to add a comment