How can I work around the iframe scaling bug in chrome 10?

Question

For reference: http://code.google.com/p/chromium/issues/detail?id=71937

Basically, the issue is that if you scale an iframe, the bounds of the contentWindow of the iframe get the scale modifier applied twice. So if, for example, you scale a 100x100 iframe by 50% (style="-webkit-transform: scale(0.5, 0.5);"), the new iframe bounds will be 50x50 but the contentWindow bounds will be 25x25. The actual content is correctly scaled.

I tried setting the innerHeight/innerWidth of the iframe contentWindow and while I was able to update the property, the contentWindow's visible bounds did not change.

Any input welcome, thanks!

possible duplicate of [How can I scale the content of an iframe?](http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe) — rds, Apr 09 '14 at 09:06

score 2 · Answer 1 · answered Aug 04 '11 at 13:22

For anyone that stumbles along this bug in the future. I solved it by applying the zoom transformations to the html node of the document inside the iframe rather than the iframe itself. I used the following code:

$(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)?>%'); 
        }
    });
});

This is using php and $scale is something like 0.5 for 50% of the size, or 2 for twice the size. It also uses jQuery.

score 1 · Answer 2 · answered Mar 21 '11 at 09:10

Here's a solution that uses jQuery (1.4.2). The applied scale can be passed into the function, which then applies the appropriate reverse scale to the iframe. Targets versions of Chrome starting with 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'
    });
  }
}

score 0 · Accepted Answer · edited May 10 '17 at 20:43

We are currently working around this issue by increasing the size of the iframe such that the inner content window is the original size of the iframe, then repositioning the iframe such that the content window matches the original position of the iframe, then clipping the iframe so that only the content window is visible.

So, in our case, the code is something like:

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

How can I work around the iframe scaling bug in chrome 10?

3 Answers3