Как обойти ошибку масштабирования iframe в Chrome 10?

Question

Для справки: http://code.google.com/p/chromium/issues/detail?id=71937

По сути, проблема в том, что если вы масштабируете iframe, то в границах contentWindow iframe модификатор масштабирования применяется дважды. Так, например, если вы масштабируете iframe 100x100 на 50% (style = "- webkit-transform: scale (0.5, 0.5);"), новые границы iframe будут 50x50, но границы contentWindow будут 25x25. Фактический контент правильно масштабируется.

Я попытался установить innerHeight / innerWidth iframe contentWindow, и, хотя я смог обновить свойство, видимые границы contentWindow не изменились.

Любой ввод приветствуется, спасибо!

Answer 1

Для всех, кто столкнется с этой ошибкой в ​​будущем.Я решил это, применив трансформации масштабирования к узлу html документа внутри iframe, а не к самому iframe.Я использовал следующий код:

$(function() {
    $("#iframe_name").load(function() {
        $("#iframe_name").contents().find('html').css('-moz-transform', 'scale(<?=$scale?>)');
        $("#iframe_name").contents().find('html').css('-moz-transform-origin', 'left top');
        $("#iframe_name").contents().find('html').css('-webkit-transform', 'scale(<?=$scale?>)');
        $("#iframe_name").contents().find('html').css('-webkit-transform-origin', 'left top');
        $("#iframe_name").contents().find('html').css('transform', 'scale(<?=$scale?>)');
        $("#iframe_name").contents().find('html').css('transform-origin', 'left top');
        if (navigator.appVersion.match(/MSIE/)) {
            $("#iframe_name").contents().find('html').css('zoom', '<?=(100*$scale)?>%'); 
        }
    });
});

Это использует php, а $ scale - что-то вроде 0.5 для 50% размера или 2 для двойного размера.Он также использует jQuery.

Answer 2

Вот решение, которое использует jQuery (1.4.2).Примененная шкала может быть передана в функцию, которая затем применяет соответствующую обратную шкалу к фрейму.Целевые версии Chrome, начиная с 10.0.648

function iframeFix (scale) { 
  // Chrome 10 preview fix
  // See: http://code.google.com/p/chromium/issues/detail?id=71937
  // 
  // iframe is scaled twice in this version of Chrome.
  // Fix is to apply a reverse scale on the iframe
  var chrome_preview_bug_version = "Chrome/10.0.648";
  if (navigator.userAgent.indexOf(chrome_preview_bug_version) > -1) {
    var scale_fix = Math.sqrt(1/scale); 
    $('iframe').css({
      '-webkit-transform': 'scale(' + scale_fix + ')',
      '-webkit-transform-origin': '0 0'
    });
  }
}

Answer 3

В настоящее время мы работаем над этой проблемой, увеличив размер iframe таким образом, чтобы внутреннее окно содержимого соответствовало исходному размеру iframe, затем изменив положение iframe таким образом, чтобы окно содержимого соответствовало исходной позиции iframe, а затем обрезав его.iframe, чтобы было видно только окно контента.

Итак, в нашем случае код выглядит примерно так:

var chromefix = 7;
var scale = .147;
frm.style.webkitTransform = 'scale(' + scale +',' + scale +')';
frm.style.width = basew/scale*chromefix + "px";
frm.style.height = baseh/scale*chromefix + "px";
frm.style.left = ( basex - ((basew/scale-basew)/2)*chromefix ) + "px";
frm.style.top = ( basey - ((baseh/scale-baseh)/2)*chromefix ) + "px";
frm.style.clip= 'rect(0px,'+basew/scale+'px,'+baseh/scale+'px, 0px)';