Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Matrix with skew seems to be buggy #12

Open
jaukia opened this issue Sep 12, 2011 · 33 comments
Open

Matrix with skew seems to be buggy #12

jaukia opened this issue Sep 12, 2011 · 33 comments

Comments

@jaukia
Copy link

jaukia commented Sep 12, 2011

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

jaukia commented Oct 18, 2011

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

@louisremi
Copy link
Owner

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

@jaukia
Copy link
Author

jaukia commented Oct 18, 2011

Excellent :)

2011/10/18 Louis-Rémi Babé
reply@reply.github.com:

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:
#12 (comment)

@louisremi
Copy link
Owner

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
Copy link
Author

jaukia commented Oct 18, 2011

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

-janne

2011/10/18 Louis-Rémi Babé
reply@reply.github.com:

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:
#12 (comment)

@louisremi
Copy link
Owner

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
Copy link
Author

jaukia commented Oct 19, 2011

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é
reply@reply.github.com:

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:
#12 (comment)

@louisremi
Copy link
Owner

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

@jaukia
Copy link
Author

jaukia commented Oct 20, 2011

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
Copy link
Owner

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

@louisremi
Copy link
Owner

(thank you for helping me testing it)

@louisremi
Copy link
Owner

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
Copy link
Author

jaukia commented Oct 20, 2011

:)

@jaukia
Copy link
Author

jaukia commented Oct 20, 2011

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
Copy link
Owner

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
Copy link
Author

jaukia commented Oct 25, 2011

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
Copy link
Owner

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

@louisremi
Copy link
Owner

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

@jaukia
Copy link
Author

jaukia commented Oct 26, 2011

Hi,

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

Open problems:

@louisremi
Copy link
Owner

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
Copy link
Author

jaukia commented Oct 26, 2011

  • 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
Copy link
Author

jaukia commented Oct 26, 2011

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

@louisremi
Copy link
Owner

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

@jaukia
Copy link
Author

jaukia commented Oct 27, 2011

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é
reply@reply.github.com:

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:
#12 (comment)

@jaukia
Copy link
Author

jaukia commented Oct 27, 2011

There are still some major problems on Safari/Chrome:

Sorry for not having better test cases on these.

-janne

2011/10/27 Janne Aukia janne.aukia@gmail.com:

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é
reply@reply.github.com:

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:
#12 (comment)

@jaukia
Copy link
Author

jaukia commented Oct 27, 2011

(These might be just symptoms of the same issue)

@jaukia
Copy link
Author

jaukia commented Oct 28, 2011

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

@jaukia
Copy link
Author

jaukia commented Oct 31, 2011

Thanks for the fix!

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

@jaukia
Copy link
Author

jaukia commented Nov 2, 2011

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
Copy link
Owner

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

@jaukia
Copy link
Author

jaukia commented Nov 3, 2011

Actually, now that I look at this again I believe, that:

  1. the pink rectangle does not work on Chrome
  2. both the pink and the green rectangles fail on Safari

The hack fixes both of these problems.

Excellent if you can have a look at this :).

@louisremi
Copy link
Owner

Hi @jaukia,

I've just added values rounding in the library, does that solve you problem by any chance?

@jaukia
Copy link
Author

jaukia commented Jun 14, 2013

I'm sorry I haven't had time to look at this. Also, the code in Zoomooz has already diverged a bit and I don't have currently the time to make it to work with jquery.transform.js. So, feel free to close this issue.

Excellent work you've been doing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@louisremi @jaukia