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

Question

我的任务是修复我们的 Safari 5.05 for OSX 产品中的一个错误，该错误导致另一个页面 (iframe) 的加载预览未正确缩放。奇怪的是它可以在 Windows 版 Safari 和 ipad 版 Safari 中使用。

iframe 在 OSX 上被切成两半，改变包装 div 的宽度确实没有任何好处。如果我将比例更改为 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 元素。