1

I am attempting to get a cross-browser css zoom to work, but everything I have found here isn't working for me.

Here is what I have:

HTML

<div id="themeframe">
<div class="themeframe-overlay"></div>
<iframe src="/index.php"></iframe>
</div>

CSS

#themeframe{
position:relative;
width:520px;
height:400px;
margin-top: 20px;
border: none;
overflow: hidden;
}

#themeframe .themeframe-overlay{
position:absolute;
z-index:95;
left:0;top:0;
height:100%;width:100%;
background:#fff;
opacity:0;
filter: alpha(opacity = 0);
}


#themeframe iframe {
width:1040px;
min-height: 800px;
overflow: hidden;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
-ms-transform: scale(0.5);
-ms-transform-origin: 0 0;
margin: 0;
padding:0;
border: none;
}

What am I trying to achieve? I have a 520 x 400 div that I want filled with a 50% scaled version of a webpage. As shown above, I have issues in IE, where the div/iframe is the correct size, but the webpage inside is 100%, NOT 50%. This is working in every other browser. If I add zoom:0.5; to the iframe css, it fixes it in IE, but breaks it in chrome.

I am having trouble getting this to work in IE, Chrome, Safari, and Firefox all at the same time.

Any thoughts?

livinzlife
  • 863
  • 3
  • 17
  • 33

1 Answers1

1

Found the answer, which at least worked for me. Part of this answer was used following the steps found here.

First, arrange your HTML like this (I'm bad at arranging code on this site):

<div id="themeframe">
    <iframe src="/index.php" id="frame" width="794" height="1550"></iframe >
</div>

Then CSS looks like this:

#themeframe {
    overflow: hidden;
    position: relative;
    width:800px;
    height:850px;
    -ms-zoom: 0.75;
}


#frame {
    position: absolute;
    overflow-x: hidden;
    top: -300px;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;

The changes I'll point out are:

  1. I wrapped the iframe in a div called themeframe

  2. I gave the iframe an id so we could style it in CSS.

  3. I used the -ms-zoom on the wrapping div of themeframe not within the iframe. This is because IE will scale the whole iframe to your set zoom size, not the content within it (which is what Chrome and Firefox do). It is also important to use -ms-zoom in the CSS and not simply zoom since Chrome will go crazy and pay attention to both zoom and -webkit if you don't make the ms distinction.

Hope this helps. It works for me in Chrome, FF and IE8.

Community
  • 1
  • 1