Small Caps doesn't work with Twitter Bootstrap on Chrome

Question

I have this very simple markup

<h1>
    <a href="#">
        My Title
    </a>
</h1>

and this CSS

h1 {
   font-variant: small-caps;
}

Here it is rendered on a jsfiddle.

The issue comes from using Twitter Bootstrap. The text renders like it has no font-variant defined.

I'm sure that Bootstrap is the cause, since when you remove it, the text renders as expected. Any ideas or workaround for this?

I'm trying it on Chrome 26.0.1410.64

Bootstrap ON

Bootstrap OFF

Answer 1

See this thread.

As strange as it is, the issue is actually Chrome, and the fact that you are putting the font-variant: small-caps; on a tag which resides inside an H# tag.

Apparently, Chrome is unable to honor small-caps on H# tags and their descendants at this time. Please take a look at this update to your fiddle to see what I mean.

You might have better luck altering your HTML to simply style a <span>, <p>, or <div> element to look like an <h1> element in this case - because Chrome will then honor your small-caps style.

Update:

Seeing the others' posts - I've noticed that the text-rendering: auto actually forces Chrome back into proper rendering. This update to the jsFiddle demonstrates this fix. Credit for the workaround to Martin.