All geek questions in one place

Choppy jquery and CSS animation in Firefox

I am working on minisite in which there is a lot of jQuery animation. It works great in Safari, Chrome, and IE9, but the animation is really unstable in Firefox (7, 8, and 9) on OSX. I thought the CSS animation would be smoother, so I adapted the iPad version of the site and tried it in Firefox. This is just as bad.

I did not spend much time on Firefox, so I'm not sure what I'm doing wrong here. Do I need to run GPU acceleration (for example, use translateZ (0) in Webkit), or is it just used all the time for everything (like IE9?) Is Firefox not powerful enough even with a GPU?

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

+6
source share
3 answers

After you browse and ask questions, it seems that Firefox simply does not process DOM animation, as well as other browsers. It seems like I just need to live with the volatile animations of Firefox.

+11
source

I know this question was asked a few years ago, but I just stumbled upon it and there is no real answer other than "firefox sucks". The trick to speeding up hardware acceleration for animating dom elements in firefox is adding a little rotation along with your translation. For instance:

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

The reason this is interrupted is not to erase anything in the div animation (especially the text). Although I personally do not think this is the right choice for default behavior, you can see the reasoning here .

+3
source

I noticed that the animation does not stutter when firefox is finished, I am in Win 7 x32. They work fine.

Animations are a little changeable, but only transitions. The rest is good, and this site is an amazing and amazing work that you have done so far!

0
source

Source: https://habr.com/ru/post/906455/

More articles:


All Articles