Chrome is randomly displaying unreadable words when using optimizeLegibility on headers and paragraphs

Question

EDIT: we found what causes this problem and a solution. Read the choosen answer for more info.

Original question:
I'm experiencing this strange issue where the text is not rendering correctly for some words, displaying totally meaningless words or symbols instead of the words i put in the html, although inspecting the code all is how it should be, no errors in console, no problems of any kind (apparently).

First things first, the problem:

Here is how the text should be displayed on my page:

This is how it is displayed when refreshing:

When i zoom the page in or out it fixes itself until the next refresh. I use a google web font ("Cabin" for anyone interested) but it seems to not be the issue since i tried different fonts with no luck.

I also include some third party javascript in the page (jquery.js, underscore.js, backbone.js, handlebars.js, foundation.js, jquery.cookie.js, i18next.js) and a bunch of proprietary js files.
I tried to disable them one by one and the problem goes away when i disable all of them.(conflict maybe?)

I tested the page on different pc/laptops in my office, tried locally and online, but the issue persist.

I read a question here on SO (can't find the link) where a user was having text rendering problems and fixed it wit CSS propriety -webkit-transform: translateZ(0); but looks like it's not my case.

For what is worth, here is my HTML:

<div class="footer-story full-width">
<div class="footer-story-row">
    <h5>SUGGESTED</h5>
    <div class="columns large-6">
        <img src="http://lorempixel.com/120/120" alt=""/>
        <div class="inline-top">
            <h5><a href="">This is the title of the article</a></h5>
            <p>by <a href="">RandomUsername</a></p>
        </div>
    </div>
</div>
</div>

And the css involved (not everything):

.footer-story {
  width: 100%;
  max-width: 100%;
  height: 400px;
  background-color: gray;
  padding-top: 15px;
}
.footer-story .footer-story-row h5 {
  color: white;
  border-bottom: 1px solid #ffffff;
}
.inline-top .footer-story .footer-story-row h5 {
  border-bottom: 0px !important;
}

Now i have no idea how to look for a solution for this problem, because i can't see where the problem generates and can't reproduce it for you to see and play with.

I'm assuming it's a Chrome bug since everything works fine on Firefox, but i can't find anything similar anywhere, so i hope some of you can at least point me in the right direction to find a solution.
Thanks

Answer 1

I was able to fix this by using webfontloader to load Google Fonts.

Instead of:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500">

Use this:

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Roboto:300,400,500']
    }
  });
</script> 

See: https://github.com/typekit/webfontloader#get-started

Answer 2

Ok so we finally found what was wrong:

Foundation puts text-rendering:optimizeLegibility by default on all <h> and <p>.

Looks like this css property behaves really buggy with chrome, you can read more about the problem here:

Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?

https://code.google.com/p/chromium/issues/detail?id=39017

It looks different from the bug issued above, but it has the same behavior although in different circumstances.

From what we have experienced it happens when:
- you load a custom font from Google Web Fonts
- you load one or more JS files in your page
- you have set text-rendering:optimizeLegibility on text elements and there's an <a></a> inside OR wrapping the text element

it happens really random and it's not easy to reproduce.

The solution was just to set the SASS variables that use this property in Foundation to text-rendering:none !default; and everything went in his place.

Hope this helps.