-webkit-transform：scale（）在OSX Safari中無法正常顯示

我一直負責修復我們的產品中的Safari 5.05 for OSX的另一頁（iframe）的加載預覽未正確縮放的問題。奇怪的是，它適用於Safari的windows，以及Safari的ipad。-webkit-transform：scale（）在OSX Safari中無法正常顯示

在OSX上，iframe被削減了一半，改變wrapper div的寬度確實沒有什麼好處。如果我將比例更改爲1，或從css中刪除-webkit轉換，則iframe將完全呈現（但不會縮小）。

它的外觀在幾乎任何瀏覽器除了OSX Safari的5.05：

它的外觀在Windows上的Safari和iPad以及幾乎所有的Chrome瀏覽器版本：

enter image description here

而OSX Safari瀏覽器版本：

enter image description here

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

有什麼建議嗎？

來源

2011-06-21 russinkungen

我有一個類似的問題，並通過將縮放級別設置爲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做同樣的事情。

來源

2011-06-23 19:41:50 Darwin

太棒了，我會在星期一回去工作時檢查一下。快樂的仲夏來自瑞典。 – russinkungen

精美的作品，謝謝！（'iframe'）。content（）。find（'html'）。css（[...]）請注意，iframe不一定是加載的當使用文件準備好。解決方法是使用$（）。load（）加載iframe並使用回調。但是我決定把它全部放在代碼後面（使用asp.net）來避免fouc。 – russinkungen

-webkit-transform：scale（）在OSX Safari中無法正常顯示

回答

相關問題