Sprites animate incorrectly when within a scaled element

[GavinJoyce]

I'm not sure if this is a scenario that ember-animated should handle or not. If not, please let me know so that I can consider approaches other than making modifications to ember-animated.

I'm using ember-animated in ember-present. I'm applying a scale to slides based on the available viewport in order to maximise their size of the slide while maintaining a 16:9 aspect ratio. When a scale is applied, the animated sprites seem to move to incorrect positions:

When I remove the scale, the sprites animate correctly:

Here's a PR which contains a reproduction of the behaviour

[GavinJoyce]

It looks like we might be able to make a relative adjustment to the transform based on the scale (I might be using incorrect terms here, I'm currently unfamiliar with the codebase). Notice how a scale of 50% results in transformations which appear to make it half way:

[GavinJoyce]

Here's a useful webpage on CSS Matrix:

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

[GavinJoyce]

Here are the calculated _initialBounds and _finalBounds for a scale of 100% and 50% (this is a simple animation of a sprite from 0,0 to 100,0. Perhaps these bounds should be the same irregardless of scale?

100%

50%

[GavinJoyce]

If I apply the scale from the _initialCumulativeTransform in motions/move, this produces the correct result. I don't believe that this is the correct place to make these adjustments however, it would be simpler if provided bounds had these adjustments applied already:

[GavinJoyce]

I have a WIP PR which seems to fix issues with sprite animations. There are still some remaining issues in the PR to fix though

[courajs]

Just saying - what a fantastically thorough issue!

[samselikoff]

@ef4 – would you consider this (and #48) a bug or a feature request?

[ef4]

Bug, because if we don't know how to measure correctly inside scaled contexts, we're punching a hole in an otherwise nice compose-able abstraction (a scaled thing should work just like it did before it scaled, only rendered at a different size).

[sethphillips]

I'm going to put my +1 on this. We have an app that uses transform: rotate() on a parent of the animated content. the sprites have 2.3e+2px width/height or some other ungodly high number.
If desired I'm sure I can throw together a reproduction.