如何解决 chrome 10 中的 iframe 缩放错误？

Question

供参考：http://code.google.com/p/chromium/issues/detail?id=71937

基本上，问题在于，如果您缩放 iframe，则 iframe 的 contentWindow 的边界会应用两次缩放修饰符。因此，例如，如果您将 100x100 的 iframe 缩放 50% (style="-webkit-transform: scale(0.5, 0.5);")，新的 iframe 边界将为 50x50，但 contentWindow 边界将为 25x25。实际内容已正确缩放。

我尝试设置 iframe contentWindow 的 innerHeight/innerWidth，虽然我能够更新属性，但 contentWindow 的可见边界没有改变。

欢迎任何意见，谢谢！

Answer 1

对于将来偶然发现此错误的任何人。我通过将缩放转换应用于 iframe 内文档的 html 节点而不是 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) 的解决方案。应用的比例可以传递给函数，然后将适当的反向比例应用于 iframe。定位从 10.0.648 开始的 Chrome 版本

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)';