What are the (if any) drawbacks of using CSS3 transform: scale on text for responsive headers?

Question

I have a very elaborate header that uses lettering.js to style each individual letter.

Changing the text size with media queries would force me to change other aspect such as top, and right (relative) position as well as rotation and other styles separately.

I've found in webkit transform: scale() works well and scales all aspects of the design, not just the font size.

Do other browsers have bugs that make this a bad solution? It seems to have reasonably good browser support, but I'm worried about bugs and pixelization on other browsers and rendering engines.

What are the (if any) drawbacks of using CSS3 transform: scale on text for responsive headers?

Answer 1

There are two issues that I can think of:

1. The element will still take up its original size in the document, so you may need to use negative margins to deal with that. Here's a demonstration: http://jsfiddle.net/joshnh/MwMYT/
2. Some browsers don't render scaled elements very well. Chrome is notorious for this (although it is most noticeable when transitioning the scale of an element). They are getting better though!

With that being said, I think your proposed solution is a reasonable one, and the drawbacks are certainly manageable!