R – sIFR text stretched/blurry in Google Chrome

google-chromesifr

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

Best Answer

I can't use @font-face as my font embeds poorly and I need selectable text. To fix the vertical stretching for my sIFR in IE9 I added display:block; height:1.45em; to the .sIFR-flash which seemed to match up to IE8 and Firefox I also used a body font-size of 70% It gives an extra little flicker while loading but the stretching has stopped.

Related Topic