0 Replies Latest reply on May 1, 2015 5:07 PM by g.bollmann

    CSS property "will-change" - where? syntax? GPU Hardware Acceleration

    g.bollmann Level 1

      I would like to use the CSS property "will-change" to better optimize the performance of my app. My end application is PhoneGap Build - iOS. I need to give specific instructions for hardware acceleration.


      Project notes:

      I am animating 4 similar symbols in parallel - the clipping mask is animated, as is the y-axis.

      All 4 items reveal something in tandem. The reveal is repetitive, small (20 px y-axis), and is accomplished with play/playReverse.

      No other items animate. It is a very quiet app, on very white surroundings.

      I use "touchEnd" and "click".

      I now have my SVGs set to DIV, which is more responsive than if set to IMG.

      The result in Edge Inspect and PhoneGap Build are terribly sluggish in iOS.



      Will-Change / Hardware Acceleration / GPU:

      What is the syntax to use for "will-change" in Edge Animate?


      Where do I place it? Directly in the .js file? In the interface?


      How do I reference a different symbol to do so? -For instance, I would place "will-change" with the top level menu button to control another symbol altogether.  Then, I'd want it that when that button is off, "will-change" is off. I hope to minimize the GPU/battery impact.


      Is the code "gpuAccelerate: true," still valid or out of date? If so, where does it go and with what proper syntax?



      Can any of the following issues impact the responsiveness:

      Symbols nested 6 deep - is that too much?

      "Branching" symbols - 4 symbols, identically built, are themselves combined into a single, larger symbol. The 4 symbols are animated in tandem. (The 4 symbols raise by 20px, then may lower by 20px.)

      Can SVGs cause such a bottleneck? If so, what is the recommended maximum individual or total SVG file weight?

      Making many references to a nested marker.

      Making many checks on whether a marker is visible or hidden.

      && statements



      My code is not consistently read into the browsers neithier with Chrome preview nor Edge Inspect on iOS. It seems like the browser "times out" or "gets too tired" to finish reading in the code. I don't think the code is particularly complex. In any case, I'd expect the browser to make me wait and not just partially load the code.


      Many thanks for all input