CODEWITHSUNDEEP
htmlcssiframe
DisEngaged
DisEngaged

Reputation: 219

Rescaling iFrame content works in Chrome - NOT other browsers - any Solutions?

Rescaling iFrame content works in Chrome, but not other browsers. Any solutions? I'd like a cross-browser solution for rescaling an iframe to place a form in.

It doesn't rescale in IE8 and Firefox 15.0.1. It appears at 100% in these browsers, but is reduced in Chrome. Any thoughts?

<iframe src="http://www.apple.com/"
frameborder="0" noresize="noresize" scrolling="no"
width="66%" margin: 0 auto; align= "left "seamless="seamless"style="
-webkit-transform:scale(0.5);-moz-transform-scale(0.5);
width: 400px; height: 400px;"></iframe>

http://jsfiddle.net/DisEngaged/t9yhm/

Upvotes: 0

Views: 3733

Answers (1)

tw16
tw16

Reputation: 29625

You have made a small typo / used the wrong syntax for Firefox. You have used a - instead of a :.

Live example: http://jsfiddle.net/t9yhm/3/

Instead of:

-moz-transform-scale(0.5);

It should be:

-moz-transform:scale(0.5);

Also, it is worth noting that the latest versions of Firefox support the unprefixed version:

transform:scale(0.5);

EDIT :

Sorry, I've just noticed that you wanted a "cross-browser" solution. The CSS3 below will support the latest versions of Firefox, Chrome and IE9+ :

iframe{
    width: 400px;
    height: 400px;
    margin: 0 auto;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

For IE8 and below there is a filter you can use, but it has a complicated syntax:

/* IE8+ - must be on one line*/ 
-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');

To help you calculate the matrix values you can use this site: http://www.useragentman.com/IETransformsTranslator/

Upvotes: 2

Related Questions