jQuery and CSS Animations Choppy in Firefox

非 Y 不嫁゛ 提交于 2021-01-27 01:41:30

问题


I'm working on a minisite that features a lot of jQuery animation. It works fine in Safari, Chrome & IE9, but the animation is really choppy in Firefox (7, 8 & 9) on OSX. I thought CSS animation would be smoother, so I adapted the iPad version of the site and tried that out in Firefox. It seems just as bad.

I haven't spent a lot of time with Firefox, so I'm not sure what I'm doing wrong here. Do I need to trigger GPU acceleration (like using translateZ(0) in Webkit,) or is it just used all the time for everything (like IE9?) Is Firefox just not powerful enough, even with the GPU?

I'd really appreciate any help I can get. I'm kind of at the end of my rope on this.


回答1:


After a fair amount of looking around and asking questions, it seems that Firefox just doesn't handle DOM animation as well as the other browsers. So it looks like I'll just have to live with choppy Firefox animation.




回答2:


I know this question was asked years ago but I just stumbled upon it and there is no real answer aside from 'firefox sucks'. The trick to enabling hardware acceleration for animating dom elements in firefox is to add a small rotation along with your translate. For example:

@keyframes square-animation {
    0%, 100% {
        transform: translate(600px, 160px) rotate(0.01deg);
    }
    50% {
        transform: translate(355px, 160px) rotate(0.01deg);
    }
}

The reason it's choppy is to avoid blurring anything within the div being animated (especially text). While I personally don't think this is the right choice for default behaviour, you can see the reasoning here.




回答3:


I noticed the animations don't stutter while the firefox is windowed, I am on Win 7 x32. They work out real smooth.

The animations are a little choppy while tranisitions only. Rest is good & that website is an astonishing & amazing work you have done so far!



来源:https://stackoverflow.com/questions/8937075/jquery-and-css-animations-choppy-in-firefox

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