Search code examples
htmlcssgoogle-chrometextdirectwrite

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

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.

Solution

  • 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.