Gibt es eine Möglichkeit, die Artefakte auszublenden, die in Webkit-Browsern angezeigt werden, wenn jQuery animate verwendet wird?

Question

Ich verwende jQuery animate zum Einblenden von Elementen auf einer Webseite. Aus irgendeinem Grund, nur in Webkit-Browsern, gibt es eine Spur von Artefakten über den Raum das Element animiert wurde über. Gibt es eine Möglichkeit, dies zu stoppen oder ausblenden es passieren?

Sie sind auf dem Karussell zu sehen, sobald Sie die Seite hier laden: http://www.mywebclass.org/~jeff/

Answer 1

In Ihrem animieren Callback, blättern Sie nach unten 1px dann zurück bis 1px:

$(this).addClass('active');
scrollTo(document.body.scrollLeft, document.body.scrollTop + 1);
scrollTo(document.body.scrollLeft, document.body.scrollTop - 1);

Answer 2

Auf diesem Gerät hier kann ich keine Spuren erkennen, aber ich weiß, welchen Effekt Sie meinen.

Es ist nicht direkt eine Lösung, aber ich meine mich zu erinnern, dass die Animation der linken Eigenschaft auf langsameren Systemen sehr ressourcenintensiv ist. Es würde wahrscheinlich zu einer insgesamt reibungsloseren Erfahrung führen, wenn Sie mit einer <div> wobei overflow:hidden; eingestellt ist und ein größeres Dia, das Sie durch Animieren bewegen scrollLeft() anstelle dieser Animationen.

Es gab einen Beitrag auf jQuery für Designer über das, ich werde aktualisieren, sobald ich es gefunden habe.

Aktualisierung: "jQuery für Designer - Spaß mit Überläufen"

Answer 3

Ich sehe nur die Reste der Animation in der H1, was meiner Meinung nach auf die Verwendung einer nicht standardisierten Schriftart zurückzuführen ist.

Es ist keine Lösung, aber wenn Sie es nicht verhindern können, können Sie diese kleinen Bastarde entfernen, indem Sie die Webseite einfach 1 Pixel nach oben oder unten scrollen.

Sie verwenden auch eine veraltete Version von jQuery (1.3 statt 1.6.2), gibt es dafür einen Grund? Wenn nicht, sollten Sie die neueste Version verwenden

Answer 4

Spuren auf der linken Seite von @font-face-Text, der mit der Eigenschaft left in Chrome und Safari animiert wird. Ich fand heraus, dass die Verwendung einiger Polsterung links auf den Text und die Anpassung der Animation zu akkommodieren das Problem behoben.