sIFR text stretched/blurry in Google Chrome

StackOverflow https://stackoverflow.com/questions/1978630

  •  22-09-2019
  •  | 
  •  

문제

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
});
도움이 되었습니까?

해결책

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

다른 팁

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.

I noticed that setting the width of .sIFR-flash to 100% seems to correct the issue.

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 =)

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.

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()?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top