I am using jQuery animate to slide in items on a web page. For some reason, only in webkit browsers, there is a trail of artifacts across the space the element was animated over. Is there a way to stop this from happening or hide it?

They are seen on the carousel once you load the page here: /

I am using jQuery animate to slide in items on a web page. For some reason, only in webkit browsers, there is a trail of artifacts across the space the element was animated over. Is there a way to stop this from happening or hide it?

They are seen on the carousel once you load the page here: http://www.mywebclass/~jeff/

• javascript
• jquery
• jquery-animate
• artifacts

4 Answers 4

In your animate callback, scroll down 1px then back up 1px:

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

On this machine here, I can't see any trails, but i know the effect you're talking about.

It's not directly a solution, but I seem to remember that animating the left-property is very resource-heavy on slower systems. It would probably lead to an overall more smooth experience if you would work with a <div> where overflow:hidden; is set and one larger slide, that you move by animating scrollLeft() instead of these animations.

There was a post on jQuery for Designers about that, i'll update once i've found it.

Update: "jQuery for Designers - Fun with Overflows"

I only see the leftovers of the animation in the H1 which I think is caused by using a non standard font.

It's not a solution but if you can't prevent it, you can remove those little bastards by just scrolling the webpage 1 pixel up or down.

You're also using an outdated version of jQuery (1.3 instead of 1.6.2), is there a reason for this? If not, you should use the latest version

Trails on the left side of @font-face text animated using the left property in Chrome & Safari. I found that using some padding left on the text and adjusting the animation to acodate fixed the problem.