0

This is a weird "bug", I cant reproduce it always, but on the fiddle test case seems to fail more often. This is ONLY showing in chrome/windows, I couldn't reproduce it in IE at least and someone confirmed it doesn't happen in chrome/Linux.

The fiddle: http://jsfiddle.net/u25zr/2/

As you can see, text is not horinzontally aligned.

A weird thing: if you right-click on the text, click "inspector tools" and untick/tick again the font-family property, it magically fixes.

I attach an image so you can see what should happen:

Alignment

Since I used a jsfiddle link, I need to add a code block also, so ill just add the markup, which is not related at all...

<div class="recipe">
    <div class="recipe-top">
        <div class="category"><a href="#">Text</a></div>
        <h2><a href="#" title="">Test Recipe 1</a></h2>
        <div class="date">12 Jan 2013</div>
    </div>
</div>

EDIT: Moving the SVG font to the bottom so Chrome uses the woff instead of the svg fixes the problem. So it looks like the problem its in the SVG rendering.

felixjet
  • 605
  • 1
  • 6
  • 11
  • 1
    Lokks fine for me in Chrome V. 31.0.1650.63 – DaniP Jan 03 '14 at 17:22
  • Are you on windows 7+ ? – felixjet Jan 03 '14 at 17:24
  • 1
    Adding markup that is “not related at all” is certainly not productive. The question itself should contain code needed to reproduce the problem. A jsfiddle should be regarded just as an extra convenience. – Jukka K. Korpela Jan 03 '14 at 17:27
  • @Danko Well, unfortunately it doesnt happens always :( – felixjet Jan 03 '14 at 17:28
  • @Jukka K. Korpela the code needed to reproduce the problem is just using font-face. And i dont know how to reproduce it anyway, its just something happening and i provided an example. – felixjet Jan 03 '14 at 17:29
  • Also i must add, that as you can see in the image, chrome renders the text-decoration centered. maybe is a bug replacing the font when its loaded... – felixjet Jan 03 '14 at 17:41
  • @Danko can you please try with an "incognito mode" window? i dont know if thats the name in english (ctrl+shift+N) – felixjet Jan 03 '14 at 19:26

1 Answers1

0

Well, after some wasted hours this seems to be a (another) chrome bug.

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

And i also found a solution here:

Chrome svg-Font-Rendering breaks Layout

Which is good, but doesnt validate CSS. Anyway nothing else we can do.

Community
  • 1
  • 1
felixjet
  • 605
  • 1
  • 6
  • 11