title: Cross-browser method of using the transform:scale css property?
body: <p>I have the following css rules:</p>
  
  <pre><code>  -webkit-transform: scale(0.5);  /* Saf3.1+, Chrome */
       -moz-transform: scale(0.5);  /* FF3.5+ */
        -ms-transform: scale(0.5);  /* IE9 */
         -o-transform: scale(0.5);  /* Opera 10.5+ */
            transform: scale(0.5);
  </code></pre>
  
  <p>Which I intend to apply to a div in order to scale it, including all its contents, images, etc, to 50% its size while keeping the same center. As you probably know the rules I listed do exactly that, except for IE7-8.</p>
  
  <p>According to <a href="http://www.useragentman.com/IETransformsTranslator/" rel="noreferrer">this site</a>, the equivalent, MS proprietary rule would be:</p>
  
  <pre><code>   /* IE8+ - must be on one line, unfortunately */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand')";
  
     /* IE6 and 7 */ 
     filter: progid:DXImageTransform.Microsoft.Matrix(
              M11=0.5,
              M12=0,
              M21=0,
              M22=0.5,
              SizingMethod='auto expand');
  </code></pre>
  
  <p>However these don't seem to actually resize the contents of the div, it seems to shift its position but that is all.</p>
  
  <p><a href="http://css3please.com/" rel="noreferrer">CSS3Please.com</a> reports different matrix values to be the equivalent for scale(0.5):</p>
  
  <pre><code>filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                       M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
  </code></pre>
  
  <p>I've tested these aswell, but the effect was the same; the div seemed to change its position, but the actual size of its contents remained unchanged.</p>
  
  <p>Finally I've tried <a href="https://github.com/pbakaus/transformie" rel="noreferrer">transformie.js</a>, which calculates the matrix via <a href="http://sylvester.jcoglan.com/" rel="noreferrer">sylvester.js</a> automatically as you assign the transform property, but the end result was still:</p>
  
  <pre><code>M11=0.5, M12=0, M21=0, M22=0.5
  </code></pre>
  
  <p>Exactly the same as the one I tried first, which seemingly did do nothing other than shift the position of the div.</p>
  
  <p>I <em>would</em> try <a href="http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/" rel="noreferrer">cssSandpaper.js</a>, but it looks pretty bloated for what I intend to do, plus there's no jQuery port and I don't feel like adding cssQuery to the project only for that. Chances are the results would be the same as what transformie.js generates though, because it seems to use sylvester.js aswell.</p>
  
  <p>Edit: I also tried <a href="http://blogs.msdn.com/b/thebeebs/archive/2010/12/07/using-modernizr-to-support-the-scale-css3-2d-transform-in-older-versions-of-ie.aspx" rel="noreferrer">this</a> which seems to come from microsoft directly, and suggests the following matrix calculation method:</p>
  
  <pre><code>function resizeUsingFilters(obj, flMultiplier) {
      // If you don't do this at least once then you will get an error
      obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";
      // Resize
      obj.filters.item(0).M11 *= flMultiplier;
      obj.filters.item(0).M12 *= flMultiplier;
      obj.filters.item(0).M21 *= flMultiplier;
      obj.filters.item(0).M22 *= flMultiplier;
  }  
  </code></pre>
  
  <p>Unfortunately this does not scale the contents of the div itself either. It looks like this may not be possible at all, but:</p>
  
  <p><strong>How can the modern <code>transform: scale</code> be simulated in IE8-7, in such a way that it actually resizes inner div contents aswell?</strong></p>
  
  <p>Perhaps I'm looking for something that doesn't exist, but I wanted to be sure. All the tests have been done using IE9 in compatibility mode for IE8 and IE7 (so far it has always done the job, I don't believe it's unreliable but feel free to correct me if you think otherwise)</p>