Question

I’ve been tasked with fixing a bug in our product for Safari 5.05 for OSX where a loaded preview of another page (iframe) isn’t scaled properly. What’s odd is that it works in Safari for windows, aswell as Safari for the ipad.

The iframe is cut in half on OSX, and changing the width of the wrapper div really doesn’t do any good. If I change scale to 1, or remove the -webkit-transform from css, the iframe is fully rendered (but not scaled down).

How it looks in just about any browser except OSX Safari 5.05:

How it looks in Safari on Windows and iPad and just about any version of Chrome:

And the OSX Safari version:

<div id="newsletterPreview" class="scaleDownPreview" style="-webkit-transform: translate(-157px, -267px) scale(0.6); ">
    <iframe style="width: 1338.3333333333335px; height: 1333px; " frameborder="0" src="controls/NewsletterPreview.ashx?skipIframe=true">
        [bla bla bla]
    </iframe>
</div>

.scaleDownPreview {
    zoom: 0.6;
}

Any suggestions?

Answer 1

I had a similar problem and fixed it by setting the zoom level to the iframe content rather than the iframe element.

I fixed in my Rails app a like this.

<iframe src="/?zoom=0.5" />

And then on that page just styled it like this.

<% if params[:zoom] %>

 <style type="text/css" media="screen">
  html {
    -moz-transform: scale(<%= params[:zoom] %>);
    -moz-transform-origin: left top;
    -webkit-transform: scale(<%= params[:zoom] %>);
    -webkit-transform-origin: left top;
    transform: scale(<%= params[:zoom] %>);
    transform-origin: left top;
    zoom: <%= params[:zoom] %>;
  }
</style>

<% end %>

One could do the same thing with javascript by just reaching into the iframe styling the html element.