Scale iframe Contents in IE 7 + 8 - css

Question

I am trying to scale the contents of an iframe in all browsers including IE >= 7 but it doesnt work below 9.
I modified the code from this post for the dimensions I think I need and want to put a standard 960px wide page inside of it.
How can I scale the content of an iframe?
http://www.carsonfarmer.com/2012/08/cross-browser-iframe-scaling/
#wrap {
width: 410px;
height: 426px;
padding: 0;
overflow: hidden;
border:1px solid #ccc;
box-shadow: 0px 0px 3px #333;
}
#frame {
-ms-zoom: 0.5;
-ms-transform-origin: 0 0;
-moz-transform: scale(0.5);
-moz-transform-origin: 0px 50px;
-o-transform: scale(0.5);
-o-transform-origin: 0px 50px;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
}
#frame {
width: 950px;
height: 1000px;
border: 0;
overflow: hidden;
}
In IE 8 the content is too small for the container and I get some scrollbars.
In IE 7 the content is not scaled.
http://jsfiddle.net/t2GPm/

Answer 1

I can answer the question about why IE7 doesn't scale at all:
-ms-zoom: 0.5;
The above line will work in IE8 but not in IE7, because IE7 doesn't recognise the -ms- prefix. Prefixed styles were only introduced in IE8.
You can fix this in IE7 by specifying an un-prefixed version of the zoom style. However, this isn't the full answer because zoom is also supported by Chrome and Safari; you probably don't want to use it in these browsers, as you're using transform for them.
Yes, it's a complex issue. Given the above, your best options are to use conditional comments to make the zoom property specific to IE (there are various ways to achieve this).
The other option, of course, is simply to drop support for IE7. Frankly, this isn't a bad idea; it has a lot of major issues, and a rapidly decreasing number of users. (all the stats I've seen recently say it now has fewer users than IE6)
More generally, it's important to know that zoom is not the same as scaling using transform. zoom does not actually scale the element; it zooms it. The distinction is subtle but does make a difference, particularly with relation to the layout of elements around the box being zommed/scaled, and may explain the scroll-bar problems you're having in IE8.
Because of this, zoom may not actually be what you want to do. You're using it because old IE versions don't support transform, but there are other ways of getting old IE versions to scale an element. One option is to use the proprietary filter style. It's not pretty, but it might a better fit for what you're trying to do. Try this:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=1.5320888862379554, M12=-1.2855752193730787,
M21=1.2855752193730796, M22=1.5320888862379558);
(above code taken from here)
Another option is to use a Javascript 'polyfill' library such as CSS Sandpaper. This library allows you to use standard CSS syntax for transform in old IE versions that don't don't support it. Under the hood, it uses the same filter style described above, but by giving you the ability to use standard code, it makes your CSS a lot neater.
Moving away from the original questions slightly, but while we're on the topic of vendor prefixes, I note that you haven't specified an unprefixed version of the transform style either. When using prefixed styles, it is important to also specify the unprefixed variant, so that it can be picked up by fully standards-compliant browsers, and because browsers that previously used a prefix may drop support for the prefix once the standard is well established.
Depending on version support you need, you may actually be able to drop some of the prefixed attributes already - firefox hasn't needed it since version 16 for transforms. You can see more info on this sort of thing at CanIUse.com.
Hope that helps.