animateLayerGroup() doesn't work as expected for opacity

[dksmiffs]

Caleb,

Green circle and purple rectangle added in a layer group. Animating both downward as a group works as expected, but only the first added layer fades (second added layer does not fade). Behavior identical on FF 15.0.1 and Chromium-derived 21.0:

More weirdness: this identical code works as expected (fades both layers) in the Sandbox on http://calebevans.me/projects/jcanvas/sandbox.php, but not in my own standalone code using jCanvas bce13cc3dbba76b50d354338ad6f60c071b819d8 and jQuery 1.8.2. Ideas?

$("canvas")
  .addLayer({
    method: "drawRect",
    fillStyle: "#61c",
    group: "circleAndRect",
    opacity: 1.0,
    x: 210.0, y: 123.4,
    width: 75.0, height: 40.3
  })
  .addLayer({
    method: "drawArc",
    fillStyle: "#1e6",
    group: "circleAndRect",
    opacity: 0.4,
    x: 200.0, y: 30.0,
    radius: 42.0
  })
  .drawLayers()
  // both layers move, only FIRST ADDED layer fades
  .animateLayerGroup('circleAndRect', {y: 200, opacity: 0}, 4000);

[caleb531]

Hmm, I do not experience the issue on Chrome (for the first canvas, at least), but I do animation does fail on the second canvas (this was tested in my local jCanvas sandbox).

Also note that the version of jCanvas in the online sandbox may be older than the latest commit on GitHub. This is because some older browsers don't receive the script as text/javascript, so I have to manually update the jCanvas script on my server.

Additionally, I have noticed that, ever since jCanvas 1.8 was released, these jCanvas bugs have been occurring. I have reason to believe this because jQuery 1.8 introduced automatic vendor-prefixing of some CSS properties for browsers that desire it, such as the opacity CSS property. Therefore, I am still trying to jump through hoops in avoiding the prefixing of these properties.

It seems that when jQuery tries to prefix these properties, it checks to see if the CSS property exists using the getComputedStyle function. Unfortunately, because I am dealing with objects in jCanvas, not elements, the check obviously throws an error.

ANYWAY, I have pushed a new commit just now (0ac565ed6829ff5f66e62b42a6348f32f78847ce), which should fix the above issue for both canvases. Let me know what you find.

-Caleb

[dksmiffs]

Thanks, Caleb. All my unit tests are now working again with that fix on both FF and Chromium-derived.