Chrome 35 DirectWrite (on by default) breaks my site menu

Question

Just updated to the latest Chrome 35 Stable, and noticed that the fonts are smoother - great, they've turned implemented DirectWrite. Lovely stuff.

However, it seems to break on my site.

I have the following markup for the main menu (very simple):

<ul class="menu">
    <li class="home">
        <a class="current" href="/">Home</a>
    </li>
    <li class="who-we-are">
        <a class="normal" href="/who-we-are/">Who we are <span>About the firm</span></a>
    </li>
    <li class="services-industries">
        <a class="normal" href="/services-industries/">Services &amp; Industries<span>How can we help you?</span></a>
    </li>
    <li class="our-people">
        <a class="normal" href="/our-people/">Our People <span>Partner Profiles</span></a>
    </li>
    <li class="get-in-touch">
        <a class="normal" href="/get-in-touch/">Get in touch with us<span>Let's do business</span></a>
    </li>
</ul>

Each a is padded like so: padding: 16px 17px; They are also displayed as blocks within their parent li.

Each a > span is styled like so:

display: block;
font-size: 12px;
font-weight: 800;
margin-top: 3px;
text-transform: lowercase;

The new DirectWrite causes the menu to appear like this:

With DirectWrite

When it should be appearing like this:

Without DirectWrite

Where did the extra line come from? Is there any workaround? I have tried adding a margin-right to the span to see if the text would flow back to the first line, but no such luck.

Here's the full LESS for the a and the span:

a {
    border-right: 1px solid #fff;
    padding: 16px 17px;
    color: @colorSecondary;
    display: block;
    font-size: 17px;
    line-height: 1em;
    min-width: 10px;
    .transition(.4s background-color ease-out);
    span {
        color: @colorMediumText;
        display: block;
        font-size: 12px;
        font-weight: 800;
        margin-top: 3px;
        text-transform: lowercase;
    }

Edit:

Just so you know, I am using @font-face. The font I'm using is Lato. Turning it off and defaulting to Arial or Helvetica does not fix the problem.

Have opened an issue here: https://code.google.com/p/chromium/issues/detail?id=377143 — Mike Rockétt, May 24 '14 at 08:12

score 1 · Accepted Answer · answered May 24 '14 at 08:28

1

Turns out that, once again, it was my use of text-rendering: optimizeLegibility.

That particular feature has been the bane of my existence. Really needed on some sites, but now I can't use it at all until the problem is fixed.

answered May 24 '14 at 08:28

Mike Rockétt

8,947
4
45
81

score 1 · Answer 2 · answered May 24 '14 at 12:17

1

you should add this

a{
white-space:nowrap;
}

answered May 24 '14 at 12:17

Meysam Naderi

113
2
10

That does indeed work, thank you. The only thing is that, in my case, `:after` elements are not always aligned properly. – Mike Rockétt May 24 '14 at 16:00
1

Well, it's okay. Whatever help you provide would be a workaround, and I don't like using workarounds. So, I've just turned off `text-rendering: optimizeLegibility`, until it is fixed. But thank you :) – Mike Rockétt May 25 '14 at 12:00

Chrome 35 DirectWrite (on by default) breaks my site menu

Edit:

2 Answers2