Matrix with skew seems to be buggy

[jaukia]

See the following demo (angles of the resulting skew differ): http://janne.aukia.com/htmltests/louisremi-tf-test/test-1.html

[jaukia]

Do you think you'll have time to look at this (and the other issues) at some point?

[louisremi]

Oh, I've actually been working on all of these issues during the last 24hours. I'm coming close to a solution.

[jaukia]

Excellent :)

2011/10/18 Louis-Rémi Babé [email protected]:

Oh, I've actually been working on all of these issues during the last 24hours. I'm coming close to a solution.

Reply to this email directly or view it on GitHub: https://github.com/louisremi/jquery.transform.js/issues/12#issuecomment-2440930

[louisremi]

Matrices interpolation is a real pain. I noticed some errors both in my and Heygrady's current implementation.

I wish getComputedStyle could return transformation components instead of stupid matrix

[jaukia]

My code should be doing these correctly, although finding what it does differently might be difficult.

-janne

2011/10/18 Louis-Rémi Babé [email protected]:

Interpolation is a real pain. I noticed there are errors both in mine and Heygrady's current implementation.

I wish getComputedStyle could return transformation components instead of stupid matrix

Reply to this email directly or view it on GitHub: https://github.com/louisremi/jquery.transform.js/issues/12#issuecomment-2443848

[louisremi]

Well, I found the solution in your matrixCompose function. It seems that it was a matter of the order of transform components: translate, rotate, skew and finally scale.

I was doing it wrong, and heygrady is doing it wrong as well (he's using the order of the properties returned by his decomposition function: https://github.com/heygrady/transform/blob/master/dist/jquery.transform-0.9.3.js#L1352)

Where did you find about this order?

[jaukia]

I think it is state at least here: https://bugzilla.mozilla.org/show_bug.cgi?id=531344

"Then the resulting decomposed transformation is: translate(Tx, Ty) rotate(R) skewX(atan(K)) scale(Sx, Sy)"

-janne

2011/10/18 Louis-Rémi Babé [email protected]:

Well, I found the solution in your matrixCompose function. It seems that it was a matter of the order of transform components: translate, rotate, skew and finally scale.

I was doing it wrong, and heygrady is doing it wrong as well (he's using the order of the properties returned by his decomposition function: https://github.com/heygrady/transform/blob/master/dist/jquery.transform-0.9.3.js#L1352)

Where did you find about this order?

Reply to this email directly or view it on GitHub: https://github.com/louisremi/jquery.transform.js/issues/12#issuecomment-2445371

[louisremi]

Good, Can you tell me if that fixed your problems?

[jaukia]

Thanks for trying to fix these! The bugs show up if I try to use your lib with Zoomooz.

The basic test works now ok, but this one is now broken (It worked with the earlier version): http://janne.aukia.com/htmltests/louisremi-tf-test/test-3.html

[louisremi]

Wow, I'll have a look at it. I also noticed there would be some regressions in relative animations.

[louisremi]

(thank you for helping me testing it)

[louisremi]

Ok, I fixed that one, but as I expected, I'm seeing other regressions (in many cases, shape do not rotate in the expected direction). The script will probably be larger than 4K after all.

[jaukia]

:)

[jaukia]

I did have to do some rotation hacks/fixes for Zoomooz as well, see: https://github.com/jaukia/zoomooz/blob/master/js/jquery.animtrans.js .

Function "getTotalRotation" does some rotation magic. If I remember correctly, it maintains the rotation directions that the affine transform would loose (since the affine transform does not care about rotation directions, for example).

Function "fixRotationToSameLap" ensures that the rotation is never over one lap. This is probably just zoomooz specific stuff, since normally rotations of over 360degs should be perfectly ok, I guess.

[louisremi]

Ok, we are at 4.7k now, the animation algorithm is now following w3c's spec. There're probably some bugs left here and there, so your help will be appreciated once again.

[jaukia]

Having problems with the matrix transformation. I don't know if the problem is in your code or mine, see: http://janne.aukia.com/htmltests/louisremi-tf-test/test-1.html http://janne.aukia.com/htmltests/louisremi-tf-test/test-2.html (feel free to copy the test cases)

The non-matrix one would seem to work ok: http://janne.aukia.com/htmltests/louisremi-tf-test/test-3.html

[louisremi]

the plugin throws errors, I'll have a look as soon as I get home. thanks

[louisremi]

Ok, fixed (that one was easy). Can you confirm me that this is the last bug you were encountering?

[jaukia]

Hi,

The fix seems to help. We are getting there :).

Open problems:

• (Minor) Initial shaking of the animation when starting this one: http://janne.aukia.com/htmltests/louisremi-tf-test/test-1.html
• (Major) Some problem with skew, open these, click on the skewed yellow div and compare results: http://janne.aukia.com/htmltests/louisremi-tf-test/zoomooz-jquerytransform2d/examples/rootchange/index.html http://janne.aukia.com/zoomooz/examples/rootchange/index.html
• (Major) Some problem with animation not always happening. Try clicking "Who reaches ..." on these two: http://janne.aukia.com/htmltests/louisremi-tf-test/zoomooz-jquerytransform2d/examples/svgtree/index.html http://janne.aukia.com/zoomooz/examples/svgtree/index.html
• Would it be possible to have transform origin settable for IE? I think heygrady has some kind of implementation on this. It would make it possible to have zoomooz working on IE7-8 as well, although this might be doable with some suitable transform as well.

[louisremi]

Hey,

• "(Minor) Initial shaking of the animation when starting this one:" I can't see it shaking, and I believe there's not much I can do if it does on some OS/browser
• "(Major) Some problem with skew, open these, click on the skewed yellow div and compare results:" For some reason I managed to get the matrix recomposition order wrong once again. It's fixed now
• "(Major) Some problem with animation not always happening. Try clicking "Who reaches ..." on these two:" I can see that when I double click on the tree and then click on any sentence, there's a delay before the animation begins (only with my plugin). But I have a hard time figuring out how my code can produce such an effect. Have you made any other adaptation to the code?

[jaukia]

• Shakiness on Os X on both Chrome and Safari, but not on FF
• On Safari & FF, clicking on the "Who reaches..." text does not zoom at all with the jquerytransform2d version (haven't tried the one with the new recomposition order). I could try to make a better test case for it.

[jaukia]

Now with the latest version I'm getting again "TypeError: 'null' is not an object (evaluating 'matrix[1]')"

[louisremi]

Which test? I've tried all of your examples and can"t see the error. Thank you in advance

[jaukia]

That is surprising, I've probably made some mistake. I'll try again in a couple of hours. -janne

2011/10/26 Louis-Rémi Babé [email protected]:

Which test? I've tried all of your examples and can"t see the error. Thank you in advance

Reply to this email directly or view it on GitHub: https://github.com/louisremi/jquery.transform.js/issues/12#issuecomment-2535669

[jaukia]

There are still some major problems on Safari/Chrome:

• (Major) Some problem with animation not always happening on Safari/Chrome (FF ok). Try clicking "Who reaches ..." on these two (nothing happens): http://janne.aukia.com/htmltests/louisremi-tf-test/zoomooz-jquerytransform2d/examples/svgtree/index.html http://janne.aukia.com/zoomooz/examples/svgtree/index.html
• (Major) Clicking on bottom-left face on Safari/Chrome does a totally weird transformation, FF is ok: http://janne.aukia.com/htmltests/louisremi-tf-test/zoomooz-jquerytransform2d/examples/isometric/index.html
• (Major) Clicking first on the green rect and then on the blue one does not animate on Safari/Chrome, FF ok http://janne.aukia.com/htmltests/louisremi-tf-test/zoomooz-jquerytransform2d/examples/rootchange/index.html
• (Minor) Shakiness on Os X on Safari/Chrome, but not on FF: http://janne.aukia.com/htmltests/louisremi-tf-test/test-1.html

Sorry for not having better test cases on these.

-janne

2011/10/27 Janne Aukia [email protected]:

That is surprising, I've probably made some mistake. I'll try again in a couple of hours. -janne

2011/10/26 Louis-Rémi Babé [email protected]:

Which test? I've tried all of your examples and can"t see the error. Thank you in advance

Reply to this email directly or view it on GitHub: https://github.com/louisremi/jquery.transform.js/issues/12#issuecomment-2535669

[jaukia]

(These might be just symptoms of the same issue)

[jaukia]

If you need a better test case, let me know and I'll try to craft something :).

[jaukia]

Thanks for the fix!

Now there are only a couple of bugs left on Safari/Chrome:

• (Major) Clicking first on the green rect and then on the blue one does not animate on Safari/Chrome, FF ok http://janne.aukia.com/htmltests/louisremi-tf-test/zoomooz-jquerytransform2d/examples/rootchange/index.html
• (Minor) Shakiness on Os X on Safari/Chrome, but not on FF: http://janne.aukia.com/htmltests/louisremi-tf-test/test-1.html

[jaukia]

Here is a better test case for the problem on webkit, the issue only occurs with rotations with a certain format. on webkit, the green rectangle is not working: http://janne.aukia.com/htmltests/louisremi-tf-test/chrome-rotation-bug/

A fix for this is to add "if(skew<0.001) skew = 0;" to the unmatrix, but this is a bit of a hack, see the commented out line in: http://janne.aukia.com/htmltests/louisremi-tf-test/chrome-rotation-bug/lib/jquery.transform2d.js

[louisremi]

Apparently the problem only occurs with Safari, because this works in chrome. I'll see what I can do.