jsfiddle: http://jsfiddle.net/uenfn/ . Notez la légère pixelation brève après l'animation. Cette erreur ne se produit que dans les navigateurs WebKit.
Utilisation de jQuery, j'ai une image redimensionner en une plus petite. Les nouvelles dimensions sont précisément la moitié des anciens. Juste après le redimensionnement, toutefois, l'image apparaît légèrement pixelated, puis environ 2 secondes plus tard, il semble mieux.
Comment puis-je résoudre ce problème?
6 Réponses :
Vous pouvez utiliser une image appropriée pour les dimensions que vous allez. Si vous ne pouvez pas faire cela, vous pouvez utiliser une méthode de rappel pour remplacer l'image redimensionnée avec une image de la taille des nouvelles dimensions. Ce que vous faites n'est pas différent d'étirer une image (en fait c'est exactement ce que vous faites) donc il y aura une pixélie.
Mais la pixélie dure seulement environ une seconde. Après cela, on dirait que cela devrait. Il doit y avoir un moyen de dire au navigateur de pré-rendu. Oh, et j'essaie de rendre ma page plus légère, c'est pourquoi je ne veux pas simplement charger une autre image.
Peut-être que vous pourriez utiliser une image plus petite et sur la charge de la page en faire les dimensions que vous souhaitez. Puis mince à la taille normale.
Merci pour la suggestion, mais n'a pas fonctionné. Il est frustrant comment il n'y a pas de solution (évidente) à ce problème. C'est comme si le navigateur ne décidait pas de faire quelque chose pour une seconde.
J'ai découvert que le seul moment où il fait de 150 à 300 pixels, pas de pixélie ...
et de 450 à 300 pixels, toujours pas de pixélie ...
de sorte que le correctif, ou la solution de contournement aurait pour conséquence que votre taille finale est la taille de l'image natale dans la mesure du possible.
Je pense que cela fonctionnerait dans beaucoup de situations, mais malheureusement pas dans le mien. Dans mon cas, l'image est redimensionnée et déplacée d'un point sur la page à une autre. Donc, l'avoir à être plus grand au début serait pire, car il serait pixelé au début lorsqu'il était affiché à l'utilisateur.
@Gus, s'il s'agit d'un problème de rendu WebKit, vous devrez vivre avec elle ou traiter avec une sorte de hack. Que dis-tu de ça? La taille finale est indigène mais vous avez une version plus grande différente pour le démarrage et effectuez un échange d'image juste avant l'animation.
C'est ce que j'avais auparavant, mais j'essaie d'utiliser cela afin de sauver la bande passante. Je pense avoir une autre idée. L'image plus grande est affichée, puis lorsque l'animation Commencer, la grande image est minimisée comme la normale. Mais juste avant qu'il finit, l'image est remplacée par une version plus petite cachée de la même image. Je vais essayer cela demain, avec le flou, et faire rapport.
Pour résoudre ce problème, j'ai inséré la même image une seconde fois, mais avec les dimensions que je veux utiliser. À la milliseconde après l'animation, je remplace l'image principale avec l'image précédemment cachée.
jsfiddle: http://jsfiddle.net/wlwrc/1/
Note latérale, utilisez le rappel d'achèvement de l'animation au lieu d'un autre délai d'attente. Jsfiddle.net/wlwrc/3
Drôle, l'échange d'images est la solution de contournement que j'ai suggérée que vous devriez essayer dans mes commentaires sous ma réponse. Heureux que cela ait fonctionné cependant. BTW- le faire avec un rappel comme @gradbot dit.
La solution consiste à activer l'accélération matérielle dans WebKit.
img {
-webkit-transform: translate3d(0, 0, 0);
}
A également trouvé cela pour se produire (plus légèrement) dans Google Chrome.
Résolu en 2013. https://bugs.webkit.org/show_bug.cgi? ID = 74600
image-rendering: optimizeQuality;
J'ai eu le même problème. J'ai changé le * .jpg que j'avais animé la taille de, à un * .svg et la pixélie est parti.
Ne remarque pas ce moment pixelé dans Firefox.
Il n'y a pas de "pixelation" sur W7 exécutant GC. Quelle plate-forme utilisez-vous?
Cela se produit sur le Mac en chrome et safari. Je n'ai pas testé Windows, cependant.
Il est presque comme si webkit fait un effet de zoom rapide et sale avant d'appliquer la nouvelle taille CSS. Si c'est une question inhérente à la rendu WebKit Mac, je ne sais pas comment vous allez résoudre ce problème.
J'ai une idée ... peut-être que je peux enfiler l'image légèrement un instant? Cela se débarrasserait des bords bruts. Mais peut-être qu'ils devraient devoir rendre cela aussi, ce qui le rendrait inutile. J'ai cherché une image rapide flou et je ne pouvais en trouver un, alors je vais tester cela demain.