我的任务是修复我们的产品中的OS 5.05 for OSX中的错误,其中另一个页面(iframe)的加载预览未正确缩放。奇怪的是它适用于Safari for Windows,以及适用于ipad的Safari。
在OSX上将iframe切成两半,更改包装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;
}
有什么建议吗?
答案 0 :(得分:5)
我遇到了类似的问题并通过将缩放级别设置为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 %>
只需触及iframe样式化html元素,就可以用javascript做同样的事情。