2009-12-30 15 views
2

Answeredtexte sIFR étiré/flou dans Google Chrome

La meilleure réponse ci-dessous était bon pour la prime, mais la réponse de l'utilisateur Aaron est la bonne réponse. Paramètre:

.sIFR-flash { 
width:100%; 
} 

corrige le problème dans Chrome. Malheureusement, je ne peux pas changer ma meilleure réponse car je suppose que c'est comme ça que les primes fonctionnent.

Answered


Je semble avoir quelques problèmes avec Chrome rendu spécifiquement texte remplacé sIFR étendu (et floue) dans son récipient flash. Aucun autre navigateur ne le fait (semble bien dans IE6,7,8, FF, Safari, Opera). Est-ce un bug connu/est-ce que quelqu'un a une solution de contournement?

Voici un exemple que vous pouvez consulter sur ce site: http://uvph.com/

Et voici le code remplacer:

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

Répondre

1

hmmm c'est vraiment étrange. J'ai téléchargé un testcase de votre site sur mon serveur et tout fonctionne bien en chrome. La meilleure alternative à sifr est http://cufon.shoqolate.com/generate/ son beaucoup plus petit et beaucoup plus rapide, mais vous ne pouvez plus sélectionner le texte plus

+0

Bizarre. Eh bien, vous l'avez réparé pour que vous obteniez la prime pour l'instant :) L'image d'arrière-plan ne se charge pas dans votre test, alors peut-être que c'est ça. – typeoneerror

0

Je soupçonne que c'est quelque chose d'étrange entre Chrome et le lecteur Flash. C'est comme si le film Flash était incorrectement mis à l'échelle. Le film se corrige lorsque vous cliquez dessus.

Que faire si vous définissez sIFR.useDomLoaded = false avant sIFR.activate()?

+0

Aucun dés, useDomLoaded n'a aucun effet. – typeoneerror

+0

Avez-vous une chance de le reproduire dans une page autonome? Pas d'autre HTML, CSS, remplacements etc? –

+0

Oui, je vais tenter le coup ce week-end. – typeoneerror

1

Utilise la propriété @ font-face de CSS. Il est maintenant pris en charge dans tous les navigateurs populaires (y compris IE et Chrome). http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/ a un très bon article sur l'utilisation de @ font-face sur tous les navigateurs et la page elle-même utilise des polices personnalisées. Worth checking =)

+0

D'accord. Ne servez pas sIFR aux navigateurs qui peuvent supporter @ font-face. Si vous utilisez sIFR ou des amis, demandez à votre serveur de ne les servir qu'aux navigateurs qui en ont besoin (IE plus ancien, pour la plupart). –

+0

Apparemment, ils insistent sur des solutions non-CSS. Je suis sûr qu'ils ont une bonne raison mais encore, si vous avez le temps de lire cet article, il va rendre votre vie beaucoup mieux pour les polices personnalisées =) – BYK

+0

C'est ce que c'est messieurs. J'utilise généralement Cufon mais ce site a été créé avant la sortie de Chrome. – typeoneerror

3

J'ai remarqué que régler la largeur de .sIFR-flash à 100% semble corriger le problème.

+0

Nice, j'ai hâte d'essayer ça. – typeoneerror

+0

Désolé ça m'a pris tellement de temps. C'est, en effet la bonne réponse. Je suppose que je ne peux pas changer ma "meilleure réponse" car c'était une prime. Merci, Aaron. – typeoneerror

1

Tout d'abord: définissez "forceSingleLine" sur "false". Si cela ne vous aide toujours pas: vérifiez les propriétés CSS du texte que vous voulez rendre. Le type d'affichage de l'élément rendu lui-même (pas le parent!) Devrait être "block", sinon "width: 100%" n'a aucun effet. Les meilleurs résultats pour Chrome peuvent être obtenus si sIFR est appliqué à un élément de bloc de largeur fixe - mais cette approche ne sera pas toujours réalisable.

3

Je ne peux pas utiliser @ font-face car ma police est mal intégrée et j'ai besoin de texte sélectionnable. Pour corriger l'étirement vertical de mon sIFR dans IE9 j'ai ajouté display: block; hauteur: 1,45em; au .sIFR-flash qui semblait correspondre à IE8 et Firefox J'ai également utilisé une taille de police de corps de 70% Il donne un petit scintillement supplémentaire pendant le chargement, mais l'étirement s'est arrêté.