CSS Loading animation not animating in NW.js (node-webkit)

Question

Here is a jsfiddle with my CSS loading animation working properly.

However, when I use the same code in my node-webkit app, the SVG path and colors are static and show no animation.

After a bit of research, I tried adding

"chromium-args": "--enable-threaded-compositing"

to my package.json file as per the solution to this issue. Unfortunately, this did not solve my issue.

I'm using a CSS animation for my loading screen as per advice from the second answer in this post.

My animation is a slightly altered version of this CodePen.

Has anyone had similar issues with CSS animations in NW.js? Any reason why this animation might not be working?

I previously had just a simple spinning CSS animation in place and it worked fine in my NW.js app. I'm confused by this inconsistency.

Answer 1

CSS webkit and SVG do not play well together.

This is specifically only the CSS that uses animation/transform/@keyframe references:

(-moz-webkit, -ms-webkit, -o-webkit, -webkit)

If you notice in your fiddle, the CSS shows:

.activity-box img {
display: block;
position: absolute;
width: 40px;
height: 40px;
/* Below is the key for the rotating animation */
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-o-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}

Wouldn't it be nice if you could use .activity-box svg instead of .activity-box img?

Unfortunately this doesnt work, per the svg is rendered in the browser, not with CSS webkit transforms.

<div id="flask">
<div class="background"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 113 130" xml:space="preserve">
    <g>
        <path fill="#E6E9EA" d="M0,0v130h112.084L111.75,0H0z M94.75,128C71,128,56,128,56,128s-14.873,0-38.623,0s-13.945-19.422-6.33-35.945S40,41.25,40,41.25V3h16h11v38.25c0,0,23.901,34.283,31.517,50.805S118.5,128,94.75,128z"></path>
        <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M56,127.5c0,0-14.873,0-38.623,0s-13.695-19.172-6.08-35.695C18.912,75.283,40.5,41.25,40.5,41.25V2.5h-9H56h19.5h-8v38.75c0,0,23.651,34.033,31.267,50.555c7.615,16.523,19.733,35.695-4.017,35.695S56,127.5,56,127.5z"></path>
    </g>
</svg>
...
</div>

I would recommend either:

a) convert the animation to .gif .png or .jpg and not use svg (edit: .gif does not transform either, you can use the .png filetype instead, then create an img.src swapping function for each animation frame using javascript)

b) Remove CSS webkit animations and rework your svg to animate on its own, using svg animations. see: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform