Jquery animation on Firefox 7.0.1 lags

允我心安 提交于 2019-12-12 09:46:53

问题


Does anyone know why this very simple jquery animation works perfectly in some browsers like Chrome and seems to be bugged in Firefox 7.0.1? Here's a link to the animation. If you try it in Firefox you'll see that the animation sometimes freezes then restarts. As you can see the code is very simple, only one animation, no images, and inline CSS.

html:

<div id="content" style="position: relative;width: 500px;height: 500px;overflow: hidden;">
    <ul id="slider" style="position: absolute;top:0;left:0;">
        <li style="background-color: red;height: 500px;width: 500px;list-style-type: none;"></li>
        <li style="background-color: green;height: 500px;width: 500px;list-style-type: none;"></li>
        <li style="background-color: blue;height: 500px;width: 500px;list-style-type: none;"></li>
    </ul>
</div>

JS:

$(document).ready(function () {
    to_move=$('#slider');
    to_move.animate({
       top: "-1000px"
    }, 15000,'linear');
});

Thanks you for your help.


回答1:


What you're seeing is Firefox's garbage collector kicking in every so often.

Via Dave Mandelin's blog:

Background on what GC is if you are not familiar: As a JavaScript program runs, it creates objects, arrays, strings, and functions, which take up memory. In order to not use up all your memory and crash, the JS engine must be able to automatically discover which objects are not in use anymore (so they are now “garbage”) and free them up. This “automatic memory reclamation” subsystem is called the garbage collector, or GC.)

The reason for the pauses is that SpiderMonkey uses an old-school stop-the-world mark-and-sweep collector

Vast improvements to Firefox's GC are planned but not yet implemented - see that link for more info.




回答2:


I don't know much about the inner workings of jquery, but I assume it's using a resize event for that div. Firefox handles resize events poorly, I'm not sure there's a way to fix it. Here's some more information: http://www.quirksmode.org/dom/events/resize.html



来源:https://stackoverflow.com/questions/8227447/jquery-animation-on-firefox-7-0-1-lags

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!