Lag/stutter on background animation in Firefox

[gerben]

Hi there,

 

I have created this background pattern animation and it works smoothly on safari/chrome/IE but I am experiencing some kind of stutter/lag in firefox. It even causes lag outside the browser when using other programs (OS X/macbook pro).

 

 

I have searched the forum and tried all possible solutions I could find (force3D:true, rotation:0.01, etc.) but no luck.

 

Would really appreciate any help as I am stumbling in the dark here.

 

 

Oh and thanks for an awesome framework! Great stuff!

 

Note: somehow when using codepen the strokes are blurry. This doesn't happen when working on my test server: http://preview.frodoschering.nl/pattern-animation-2/ so probably unrelated to the above issue.

See the Pen ggmzNY by gerben (@gerben) on CodePen.

[Jonathan]

Hello gerben, and Welcome to the GreenSock forum!

 

This looks at least on my end to be something in codepen causing some lag. Codepen has a lot of users on at the same time so it can and will have code not run right at times.

 

Its weird .. when i was logged out of codepen looking at your codepen examples. I saw the slight stutter or 300th of second pause gap between each animation every 3-4 seconds. But when i logged into codepen and ran it, the stutter disappeared. You can try running your codepen in debug mode or in full mode and see if you still see this stutter pause that happens every 3-4 seconds.

 

Try these links logged in and also logged out of codepen:

 

Runs code without being in an iframe - debug mode

https://codepen.io/gerben/debug/ggmzNY

 

Runs without loading css, js, and html cod panels - full mode

See the Pen ggmzNY by gerben (@gerben) on CodePen.

 

You can try and export the code in a zip file and try and run your code locally to see if you still see lag so they dont run off of codepen website

 

[GreenSock]

It certainly seems like a Firefox rendering issue. Have you tried using a png (or any raster image) instead of an SVG? Keep in mind that the browser can't really GPU-accelerate SVG elements. You're asking a LOT of the browser in terms of calculating all those pixels 60 times per second. 

 

Some browsers use certain algorithms based on the size of the image, like if it's less than a certain number of pixels it does one thing but greater than that, another. So perhaps that "lag" you notice is when it hits a threshold in Firefox and it's switching to a different rendering technique. 

 

I'm also curious if you tried using a regular img element instead of a background-image. Browsers sometimes use different rendering algorithms for those (example: http://greensock.com/will-change). 

[gerben]

Hi guys, thanks for the quick replies!

 

@jonathan: yes, codepen does seem to add some extra lag/stutters. I am not really bothered by slight stutters of 300th of a second though. It's in firefox where it really starts to get problematic. Did you check in Firefox? Here is an example outside codepen for better reference: http://preview.frodoschering.nl/pattern-animation-2/

 

@jack: I tried a png with the same results. The threshold you are referring too sounds like a possible cause of the problem although I am not sure how I could fix that. I did not try using a regular img element instead of a background-image yet. I will try and see if that helps.

 

I am also wondering if I could do something to change/simplify the animation somehow and improve performance? 

 

Thanks again for the help, really appreciate it!

[gerben]

I did another test using an img element and that improved things a lot! I still get an occasional stutter in Firefox but I think that's acceptable.

 

A new problem arises though. I new get some sort of flickering in Firefox. Any ideas? 

 

See the new pen here: 

See the Pen VPbYBB by gerben (@gerben) on CodePen.

[Jonathan]

Yes what i posted and observed above was when using latest Firefox in Windows 10.

 

What time of flickering, like the element displays on and off like shutter effect?

[GreenSock]

Are you talking about the vertical lines sometimes looking like they get fuzzy/sharp/fuzzy/sharp as things are growing? If so, that appears to be just an issue with how Firefox handles sub-pixel rendering and scaling of rasters. Imagine a single column of pixels that lands halfway between two columns of the screen's pixels - how is it supposed to make that look? Some browsers kinda fuzz the line, some make it snap to a row (which can appear jittery). See what I mean? But maybe that's not what you were seeing. I didn't notice any other flickering when I looked in Firefox. 

[gerben]

The elements are displaying correctly but there is like a faint flickering on the whole browser window. A bit hard to explain... are you on windows too Jack? I am on macOS so maybe it's mac+firefox specific thing?

 

I also noticed the fuzzy/sharp/fuzzy/sharp thing going on. I think it's acceptable for this animation although it looks a lot better on safari/chrome.

[GreenSock]

Hm. I'm on a MacBook Pro. Didn't notice faint flickering on the whole browser window. Maybe a graphics card issue on your system? Do you have access to another system to test on? 

[gerben]

No, I don't have another system nearby at the moment. I will try when I get the chance. If you don't see the flickering on a Macbook Pro + FF than it seems like it's something related to my specific setup. In any case my initial issue has been resolved.

 

Thanks a lot guys, much appreciated!

[Jonathan]

Does the flickering happen on a computer with an INTEL graphics card? i have seen that before

[gerben]

It's an NVIDIA graphics card.