Supporting 2D CSS transforms for older browsers, and other fallbacks

Continuing the discussion from Boxer Engine Updated:

@peace If you’d like to get something working with 2D transforms (for older browsers), here’s a small little something to get you started:

To run the project, you’ll need to install Node.js and Meteor, then in the root of the project run npm run dev, or just meteor. Give it some time on the initial build, which takes a while to get all the dependencies using NPM v3. It’ll draw a box on the screen and animate it on the X/Y axis.

It’s a really simple implementation of something similar to Famous 0.3.x. Check out the motor/core/Node and motor/core/Scene files to see basically the whole implementation. There’s no Engine, so you have to make your own loop. If you’re in an older browser, you’ll need to use setInterval (or a shim for requestAnimationFrame which uses setInterval behind the scenes).

Challenge: Tweak the part of the code that applies matrix3d to simply apply matrix (which is 2D) for IE 9. You’ll have to use this site to learn how to write 2D matrices for IE 8 using -ms-filter. IE 9 supports the transform:matrix() css property, but IE 8 doesn’t. You can alternatively just modify the code to use top and left properties, which should be fine for the IE8 (and possibly IE9) use case.

@trusktr – A single API is valuable so as not to have to write & maintain two separate codebases. To me, one of the web’s greatest strengths is its cross-platform nature. Separate code bases is taking a step backwards. It may not be necessary to have a separate 2D-only set of APIs. Rather, the 3D API would only perform 2D effects on deficient browsers (like a polyfill but much more involved). It may look janky, but again users can upgrade to better browsers for the full experience. And for many use cases, 2D-only could be enough.
I’m willing to contribute. I’d need some help getting started, such as where to tie in to the engine, etc.

1 Like

@peace We’d love contribution. One way you can get started is running the above code and once you understand what it does you can try adding fallbacks for IE8 and 9. I don’t have IE or Edge to test with on my main machine, so that’d be really helpful!

I’m sure you are aware, but just a reminder

1 Like