Cross browser method of using transform: scale css property?

Question

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

What I intend to apply to a div in order to scale it, including all its contents, images, etc., to 50% of its size, keeping the same center. As you probably know, the rules I listed do exactly that, with the exception of IE7-8.

According to this site, the equivalent MS ownership rule is:

  /* 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, they apparently do not resize the contents of the div, it seems to shift its position, but that’s all.

CSS3Please.com reports various matrix values ​​as an equivalent for a 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 also tested them, but the effect was the same; The div seems to have changed its position, but the actual size of its contents has remained unchanged.

Finally, I tried transformie.js , which calculates the matrix through sylvester.js automatically when assigning the transform property, but the end result was still:

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

Just like the one I tried first, which, it would seem, did nothing but move the position of the div.

I would try cssSandpaper.js , but it looks pretty bloated for what I intend to do, plus there is no jQuery port, and I don’t know. It seems to me that adding cssQuery to the project is just for that. Most likely the results will be the same as transformie.js generates, because it seems to also use sylvester.js.

Edit: I also tried this one , which seems to come from microsoft directly, and offers 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. It seems like this may not be possible, but:

How can we model modern transform: scale in IE8-7 so that it actually also modifies the inner content of the div?

Maybe I'm looking for something that does not exist, but I wanted to be sure. All tests were performed using IE9 in compatibility mode for IE8 and IE7 (until now he always did this work, I do not consider this unreliable, but do not hesitate to fix me if you think otherwise)

Answer 1

I am a little confused by your explanation. This script in IE7-8 scales internal elements just fine for me with the first set of code that you posted (although you indicate that this is not scaling, but only a change in position). The fact that this code does not (and cannot) does, scales it from the center point (it is located at the top left), and the matrix transformation cannot accommodate the translation (it is only "Resizes, rotates or changes the contents of the object" ), so it Don't "support the same center" as you, desiring.

There is a page that I found similar to transformie.js that you noted when performing the conversion, but this other page talks about the problem of centering the origin of the transformation. Ultimately, in order to get the appearance of scaling in the center, you have to enable some kind of calculation in order to shift the element using position: relative .

In this fiddle I simplified this calculation for myself manually by setting width to the wrapper of the div and knowing height based on internal dimensions. This can be complicated with any dynamic calibration, but the link is above . I believe that calculations allow you to do this dynamically using javascript (jQuery) with a sylvester. js.

Answer 2

You can also use the IE scaling property:

zoom: 0.5

This should do what you want.