13

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.

user7637745
  • 965
  • 2
  • 14
  • 27
user95227
  • 1,853
  • 2
  • 18
  • 36
  • It couldn't be something as simple as the lack of a need to load because you're working locally, could it? – kthornbloom Jul 21 '15 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 Jul 21 '15 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 Feb 12 '16 at 02: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ć Feb 23 '16 at 12:38
  • @DarkoRiđić and JL Griffin I received an email today saying the issue I opened has been corrected and closed: https://github.com/nwjs/nw.js/issues/2291 – user95227 Jul 14 '16 at 17:38
  • @user95227 thanks for notifiyng us :) – Darko Riđić Jul 14 '16 at 21:26

1 Answers1

2

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

Talvi Watia
  • 1,070
  • 1
  • 14
  • 28