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.

It couldn't be something as simple as the lack of a need to load because you're working locally, could it? — kthornbloom
– kthornbloom, Commented Jul 21, 2015 at 14:54
@kthornbloom 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. — user95227
– user95227, Commented Jul 21, 2015 at 15:26
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) — JL Griffin
– JL Griffin, Commented Feb 12, 2016 at 2:23
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. — Darko Riđić
– Darko Riđić, Commented Feb 23, 2016 at 12:38
@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 — user95227
– user95227, Commented Jul 14, 2016 at 17:38

Talvi Watia · Accepted Answer · 2019-01-16 04:26:48Z

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

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

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related