-webkit-transform: scale () не отображается должным образом в OSX Safari - PullRequest
Новая
       22

-webkit-transform: scale () не отображается должным образом в OSX Safari

0 голосов
/ 21 июня 2011

Мне было поручено исправить ошибку в нашем продукте для Safari 5.05 для OSX, когда загруженный предварительный просмотр другой страницы (iframe) не масштабируется должным образом.Что странно, так это то, что он работает в Safari для Windows, а также Safari для ipad.

Iframe сокращается вдвое на OSX, и изменение ширины div-оболочки действительно не приносит никакой пользы.Если я изменю масштаб на 1 или удаляю -webkit-transform из css, iframe будет полностью отображен (но не уменьшен).

Как это выглядит практически в любом браузере, кроме OSX Safari 5.05:

Как это выглядит в Safari для Windows и 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;
}

Есть предложения?

1 Ответ

5 голосов
/ 23 июня 2011

У меня была похожая проблема, и я исправил ее, установив уровень масштабирования для содержимого 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.

...