Cross-browser method of using the transform:scale css property?

Viewed 21761

I have the following css rules:

  -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);

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.

According to this site, the equivalent, MS proprietary rule would be:

   /* 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');

However these don't seem to actually resize the contents of the div, it seems to shift its position but that is all.

CSS3Please.com reports different matrix values to be the equivalent for scale(0.5):

filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');

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.

Finally I've tried transformie.js, which calculates the matrix via sylvester.js automatically as you assign the transform property, but the end result was still:

M11=0.5, M12=0, M21=0, M22=0.5

Exactly the same as the one I tried first, which seemingly did do nothing other than shift the position of the div.

I would try cssSandpaper.js, 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.

Edit: I also tried this which seems to come from microsoft directly, and suggests the following matrix calculation method:

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;
}  

Unfortunately this does not scale the contents of the div itself either. It looks like this may not be possible at all, but:

How can the modern transform: scale be simulated in IE8-7, in such a way that it actually resizes inner div contents aswell?

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)

2 Answers
Related