[Animated clip-path not rendering correctly in safari]

Thanks for the extra info. Hope they take care of this one day...

[Animated clip-path not rendering correctly in safari]

Ok thanks, will do!

[Animated clip-path not rendering correctly in safari]

Fantastic, this works very well! 

 

Would this solution be very heavy performance wise?

 

Thanks a lot for the help!

[Animated clip-path not rendering correctly in safari]

I am trying to create floating circular image mask using svg clip-path. It works fine in Firefox and Chrome but Safari somehow cuts off the clipped image. Resizing the browser seems to (temporarily) solve the issue.

 

I have no clue what is going on. Any help would be greatly appreciated!

 

See the Pen OjvawX by gerben (@gerben) on CodePen

[Lag/stutter on background animation in Firefox]

It's an NVIDIA graphics card.

[Lag/stutter on background animation in Firefox]

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!

[Lag/stutter on background animation in Firefox]

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.

[Lag/stutter on background animation in Firefox]

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

[Lag/stutter on background animation in Firefox]

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!

[Lag/stutter on background animation in Firefox]

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