Monday, 15 September 2008

CSS Transforms

We landed support for CSS Transforms over the weekend. This is our implementation of a spec spec proposed by Apple that allows authors to apply affine transforms (e.g. scaling and rotation) to the rendering of Web content. This feature is useful and usually can't be achieved using SVG and <foreignObject>, because wrapping HTML content in an SVG wrapper tends to mess up CSS layout and other things...

This is almost entirely the work of one intern, Keith Schwarz. We've had a great bunch of interns this (northern) summer and Keith's work was really outstanding. Not only was there are lot of work to do in the style system and rendering pipeline, but also various places in the code had to be tested and modified to be transform-aware. Not only that, but we wanted to make sure that -moz-transform wasn't just hacked in, so we made Keith create general infrastructure for handling transformed content that can cover -moz-transform, SVG <foreignObject>, and whatever else is needed in the future. So we now have an nsIFrame::GetTransformMatrix API to express transformations within the frame hierarchy, that we can build on whenever we need that information.

There are still a few loose ends. Transforms applied to windowed plugins just don't work (unsurprisingly). Combobox dropdowns and other popups such as XUL menus aren't transformed --- fixing that is possible, using transparent widgets, but would be a ridiculous waste of time in my opinion. If someone mad wants to contribute a patch, I'd review it though :-). There are issues with the construction and placement of native widgets that can cause transient rendering glitches --- they should go away with compositor. There are definitely performance issues because with a lot of the transforms you'll fall off all graphics fast-paths. A big chunk of those problems can only be solved with hardware-accelerated graphics.

Update Here's the source file for the demo.


  1. So what's the plan for hardware acceleration anyway? Doesn't Cairo already have an OpenGL backend? I can't wait for the day when my graphics card isn't sitting there like a brick while my CPU struggles to render Google Maps.

  2. Fantastic work Keith Schwarz, I'm going to have to play around with this. :)

  3. When Firefox 3.1 comes out there will be much amusement to be had by the following line into the chrome.css file of fellow co-workers' Firefox profiles:
    h1, h2, h3, img { -moz-transform: rotate(180deg) !important }

  4. Awesome! Now I can finally implement a mouse gesture that will rotate an image! 'Bout friggin' time (and if you tried to implement that mouse gesture now you'd be in as big of a world of hurt as I was when I spent a few hours trying to)

  5. Great stuff, I've been waiting for this (and font-face support) for ages. Roll on 3.1.