Search code examples
google-chromesifr

sIFR text stretched/blurry in Google Chrome


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
});

Solution

  • hmmm this is a really strange one. i've uploaded a testcase of your site to my server and everything works fine in chrome. 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