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.

Valoniah

It couldn't be something as simple as the lack of a need to load because you're working locally, could it? – Langsyne

@Langsyne thanks for the thought but it still takes about 4 seconds for the content to load so the image just appears static for 4 seconds. And a previous loading animation that was just a spinning image worked fine. – Valoniah

experiencing this exact issue as well. i have an angular JS application with fadein-out animations for the views to stop the glitchiness of ng-route. works great in chrome, refuses to work in node-webkit (or nw.js as they go by now) – Prudish

I have similar issues. Some of my animations work partially in NW, but work great in Chrome and Chromium. Do you guys know some way to copy the config-keys/switches/chrome://flags from Chromium to NW? I think this might help, but i don't know an automated way to do it. – Saito

@DarkoRiđić and JL Griffin I received an email today saying the issue I opened has been corrected and closed: github.com/nwjs/nw.js/issues/2291 – Valoniah

@Valoniah thanks for notifiyng us :) – Saito

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

Huh

updated solution A for clarity. (both methods do have working implementations, FYI) – Huh