sIFR text stretched/blurry in Google Chrome

Question

Answered

The best answer below was good for the bounty, but user Aaron's answer is the correct answer. Setting:

.sIFR-flash {
width:100%;
}

corrects the issue in Chrome. Sadly, I cannot change my best answer as I guess that's how bounties work.

Answered

---

I seem to be having some issues with Chrome specifically rendering sIFR replaced text stretched out (and blurry) in it's flash container. No other browser does this (looks good in IE6,7,8, FF, Safari, Opera). Is this a known bug/does anyone have a workaround?

Here's an example you can look at on this site: http://uvph.com/

And here's the replace code:

// -- configure sifr
var futura = { src: '/swf/bfuturah.swf' };

sIFR.activate(futura);

sIFR.replace(futura, {
    css: [
        '.sIFR-root { background-color:transparent; color: #999999; font-size:24px; text-transform:uppercase; }'
    ],
    fitExactly      : true,
    forceClear      : true,
    forceSingleLine : true,
    selector        : 'h2',
    transparent     : true
});

Answer 1

I suspect it's something odd between Chrome and the Flash player. It's as if the Flash movie is scaled up incorrectly. The movie fixes itself when you click on it.

What if you set sIFR.useDomLoaded = false before sIFR.activate()?

Answer 2

Use @font-face property of CSS. It is now supported across all popular browsers(including IE and Chrome). http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/ has a very good post about using @font-face across all browsers and the page itself uses custom fonts. Worth checking =)

Answer 3

hmmm this is a really strange one. i've uploaded a testcase of your site to my server and everything works fine in chrome http://stuff.antpaw.de/test/ . the much better alternative to sifr is http://cufon.shoqolate.com/generate/ its much smaller and much faster, but you cant select the text anymore

Answer 4

I noticed that setting the width of .sIFR-flash to 100% seems to correct the issue. Mark, if you're still monitoring this thread, does this make any sense to you at all? Thanks in advance, as it's happening to a site we implemented sIFR on as well.

Answer 5

I am having the same problem, has anyone worked out how to fix this?

Thanks,

Tom

Answer 6

Hi all,

I too face the same problem. I.e. SIFR replaced text stretched out/blurry in its flash container. This issue is only with Chrome browser in Mac.

Can any one share the fix for this?

Thanks,

TS.

Answer 7

Same problem, i have this problem in a menu and it only appear in mac in chrome.

I disabled the sifr menu if the visitor uses mac & chrome so it shows noflash version if someone enters the webpage with the lacking browser.

Hope someone can fix this soon?

// J

Answer 8

Yup, looking for a fix to this as well. Setting .sIFR-flash width to 100% does nothing.

Answer 9

First of all: set "forceSingleLine" to "false". If this still doesn't help: check the CSS properties of the text you want to be rendered. Display-type of the rendered element itself (not the parent!) should be "block", otherwise "width: 100%" has no effect at all. The best results for Chrome can be achieved if sIFR is applied to a block element with fixed width - but this approach will not always be feasible.