-webkit-transform:scale()在OSX Safari中无法正常显示

Question

我的任务是修复我们用于OSX的Safari 5.05的产品中的错误,其中另一个页面(iframe)的加载预览未正确缩放.奇怪的是它适用于Safari for Windows,以及适用于ipad的Safari.

iframe在OSX上被切成两半,改变包装div的宽度确实没有任何好处.如果我将scale更改为1,或从css中删除-webkit-transform,则iframe将完全呈现(但不会缩小).

除了OSX Safari 5.05之外,它的外观如何:

它在Windows和iPad上的Safari以及任何版本的Chrome中的外观如何:

和OSX Safari版本:

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

有什么建议？

Answer 1

我有一个类似的问题,并通过将缩放级别设置为iframe内容而不是iframe元素来修复它.

我修复了我的Rails应用程序.

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

然后在那个页面上就像这样设计了它.

<% 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 %>

人们可以用javascript做同样的事情,只需到达iframe样式的html元素.