问题
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.org/~jeff/
回答1:
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);
回答2:
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"
回答3:
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
回答4:
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 accomodate fixed the problem.
来源：https://stackoverflow.com/questions/6865310/is-there-a-way-to-hide-the-artifacts-that-show-up-in-webkit-browsers-when-using