Cross browser support

[jeremyckahn]

It seems that all of the modern browsers now support matrix transforms: https://developer.mozilla.org/en/CSS/transform

Looks like support can be added for all browsers.

[joelambert]

The main problem with cross browser is that only WebKit implements the CSSMatrix object currently which is needed to do the interpolation.

[jeremyckahn]

I never quite understood what the CSSMatrix Object does. Is it just shorthand for setting all of the translateX/Y/Z, scale and rotation properties?

[joelambert]

Its a convenience object for doing the Matrix transform stuff, its also able to read/write the CSS matrix string syntax.

Apple Docs: WebKitCSSMatrix

That said, it would be possible to produce a pure JS alternative that could just use the native implementation where it existed. I know that @cubiq was talking about implementing this, I'm not sure if it ever happened. If not I may take a look at it if I get some spare time.

[cubiq]

I have an alpha stage object I use on my projects, nothing I'm proud of but it works (doesn't have skew and rotateAxisAngle). I should just take the time to polish it and release to the public ;) If you believe it is worth I can push it

[jeremyckahn]

Personally, I would love to see Morf's functionality available to all browsers. I have very similar @keyframe generating functionality with Rekapi called toCSS(). It would be great if I could use a CSSMatrix Object polyfill to support Matrix interpolation.

@cubiq, it seems like your code would be very beneficial to both projects. :)

[jfsiii]

I think I have the polyfill @jeremyckahn mentioned.

I took the work started in Firmin and added some code to make it behave like WebKitCSSMatrix

It's passing all the tests from the WebKit source (2D, 3D) except those which test for throwing an error on incorrect input[1]. Most importantly, IMO, you can give it a CSS transform string (like rotate(18rad) translate3d(50px, 100px, 10px)) and get an object with the proper matrix properties.

I'm at the point where I'm going to extract this out to a distinct project. @jeremyckahn and @joelambert, since your projects were the two primary consumers I imagined when working on this, care to vote on the name?

I've only test in FF but "it's just math" and I don't, to my knowledge, use any platform specific code so we should be cool.

[1] I'm planning on making the error behavior configurable since using try/catch is so expensive.

[joelambert]

Great work, I look forward to taking a look! Let me know when I can have a play.

Happy to vote on a name when you have a shortlist.

[jfsiii]

@joelambert You should be able to paste the JS from https://github.com/jfsiii/firmin/blob/master/src/matrix.js into a browser or Node and have at it.

Let me know if that doesn't work or you need something else.

[jeremyckahn]

Very cool! I'm not sure that Rekapi would really benefit from integrating your Firmin work at this point (it meets its requirements), but I still think there's a lot of value in this type of polyfill. Since this is basically a cross-browser WebKitCSSMatrix Object, maybe a name based on that - XCSSMatrix, or just CSSMatrix?

[jfsiii]

@jeremyckahn XCSSMatrix is the clubhouse leader. I thought about CSSMatrix b/c it's supposed to be spec-compliant. While no vendor ever released a CSSMatrix object (only WebKitCSSMatrix), they might after the spec is reimplemented. I'd hate to have a conflicting implementation or have to explain that "it's for the old one that was a spec but ..."

No pressure to use it, but didn't you say, "It would be great if I could use a CSSMatrix Object polyfill to support Matrix interpolation."?

[jeremyckahn]

You make a good point about using XCSSMatrix over CSSMatrix - my vote goes for the former.

While I still think that such a polyfill is an excellent idea for general use, I made the comment you referenced 6 months ago. I've since implemented the functionality I needed for Rekapi, albeit in a more tightly coupled way than your Firmin/XCSSMatrix work. Considering where my code stands right now, it wouldn't benefit from an XCSSMatrix integration, it would only grow Rekapi's total file size, which doesn't benefit Rekapi users. Sorry it can't be a helpful test case for this anymore!

[joelambert]

+1 for XCSSMatrix

[geekpunk]

ie 10 now supports all of the webkit only dependencies here , would you be interested in accepting changes to support ie 10

[jfsiii]

@joelambert I just realized I never came back here to post about XCSSMatrix. It's been "ready" since around December 2012.

I have browser tests up on testling. They are/were passing in Chrome 6+, Safari 5+, FF4+, Opera 11+, IE9+. WebKitCSSMatrix conformance tests are included in those tests, but you can load them in a specific browser by visiting the Firmin test page.

[jeremyckahn]

Wow, XCSSMatrix looks great, thanks for the update! @joelambert, is this project still being maintained? Any chance this issue will be resolved?

Although I am not personally using Morf, I think it would be great for the community if this issue were resolved. At 328 stars, I imagine others would agree. :)