Wenn Sie ein Element mit der Skalierung css3 skalieren, wird es bis kurz nach Beendigung der Animation verpixelt. Ich Animiere ein Element mit einer Grenze

http://jsfiddle.net/nicktheandroid/5Ytnj/Wenn Sie ein Element mit der Skalierung css3 skalieren, wird es bis kurz nach Beendigung der Animation verpixelt. Ich Animiere ein Element mit einer Grenze

Als ich -webkit-backface-visibility: hidden; zum .circ Elemente hinzufügen, es bewirkt, dass es pixelig bleibt auch nach Abschluss der Animation.

Ich frage mich, ob es einen Weg gibt, um nicht pixelate während der Animation zu bekommen. Ich habe es in der Entwicklerversion von Google Chrome angezeigt.

Quelle

2012-04-03 android.nick

Ich hatte das gleiche Problem, außer dass ich das Problem mit der Skalierung einer Schaltfläche mit Text darin habe. Es ist ein _similar_ Problem zu dem, was [hier] (http://stackoverflow.com/q/8024061/432913) erwähnt wird. Die Grenze ist egal, [es passiert auch mit Text] (http://jsfiddle.net/Qk9gX/). – will

Okay, ich denke, ich habe eine Arbeit gefunden;

im Wesentlichen; Verwenden Sie nicht "Maßstab". Verwenden Sie "scale3d" und lassen Sie es so einrichten, dass das größte Bild scale3d(1,1,1) ist.

Here ist ein Beispiel mit dem Kreis, den Sie dort hatten. Ich habe die Skalierung auf 5 geändert, weil ich keine 0.2222222222222222222222222222222222 in die scale3d Funktion einfügen wollte ...

[edit] Also habe ich die jsfiddle Demo erneut versucht, auf einem Computer ohne Hardwarebeschleunigung und dem Pixelierungs-Effekt war weg. Es scheint also das gleiche Problem zu sein wie bei scale3d, wo es in eine Textur umgewandelt und dann skaliert wird. Sie können wie in der circ3 div here tun.

Quelle

2012-05-01 18:39:48 will

Danke, das hat mein Problem auch gelöst! Wenn Sie scale3d (1,1,1) explizit für den Startzustand (d. H. CSS-Klasse) festlegen, haben Sie mit scale3d (1.5, 1.5, 1.5) für die Übergangsklasse den Trick gemacht. Sollte die akzeptierte Antwort sein. –

Macht keinen Unterschied für mich, Bild ist zunächst klar, pixelates während der Skalierung mit scale3d und löschen nach der Animation. – Rob

@Rob Ich bin ziemlich sicher, dass es Browser-abhängig und auch GPU-abhängig ist. Sie können es in den verschiedenen Konfigurationsbits für Firefox ändern, und in Chrome können Sie ein Befehlszeilenargument hinzufügen, um GPU-Beschleunigung zu erzwingen/zu deaktivieren. – will

Wenn Sie ein Element mit der Skalierung css3 skalieren, wird es bis kurz nach Beendigung der Animation verpixelt. Ich Animiere ein Element mit einer Grenze

Antwort

Verwandte Themen