Inconsistent scrollwidth for iframe in FF/IE

Question

I've got an iframe in my page, the contents of which are changed by clicking links in the main body of the page. I am trying to resize the width of the iframe to match the contents, like so:

frame.contentDocument.body.scrollWidth

This works fine in Chrome, but in Firefox and IE, I get an iframe that shrinks each time a new link is clicked. FF seems to subtract 20-37px each click.

I have Googled and searched Stack Overflow. Some suggestions I found were related to display and overflow CSS properties. I made the changes to the CSS, but it did not help. I also tried the FF 21 Beta in the hopes that it is fixed there, but it is not.

Answer 1

Since you haven't provided a jsFiddle, I can't tell you what you might be doing wrong, but I have had a go at trying to do what you are describing and I don't really experience any of the same issues which you are experiencing. It seems to work fine in all browsers you have mentioned. Provided that you ensure the document in the iframe is loaded by the time you are trying to get its scrollWidth, and you reset the width of the iframe to 0px before you get the scrollWidth. This is to ensure that scrollWidth holds the width of the document, even when the previously loaded document was wider than the newly loaded document (in which case the scrollWidth would hold the width of the previous document inside the iframe).

Here's a jsFiddle. There is some randomization code in there for testing and demo purposes, The only bits that are important for you are:

var frame = document.getElementById("frame");

frame.onload = function () {
  $("#frame").css("width", '0px');
  $("#frame").css("width", frame.contentDocument.documentElement.scrollWidth + 'px');
}

I'm using some jQuery to make it easier for myself here, but you can probably replace that with whatever code you already have for setting the width of the iframe, and I'm using frame.contentDocument.documentElement.scrollWidth instead of frame.contentDocument.body.scrollWidth. This ensures that I'm getting the width of the html element instead of the body element, a part of your problem could be that the html or body tags on the document which is loaded into the iframe have margins or paddings set.

Edit:

I've had a bit more of a go and I can get the exact behaviour you are describing to happen both in Firefox and in Chrome. It happens if I don't set the width of the iframe to 0px before reading the scrollWidth, the width of the currently loaded document is less than the width of the previously loaded document, and I have overflow: visible set on the iframe. Have a look here for an example of the behaviour. (It happens both in Chrome and in Firefox, as long as scrolling is set to yes and overflow is set to visible).

It seems that if I don't reset the width of the iframe, the scrollWidth holds the value of the width of the previously loaded document minus the width of the vertical scroll bar. So then, if I keep setting the width to the scrollWidth, every time I do so, and the newly loaded document is smaller than the previous document, the width of the iframe decreases by an amount of pixels equal to the width of the vertical scroll bar.

Conclusion: a definitive fix would be to set the width of the iframe to 0px (or anything less than or equal to the minimum width of the document which will be loaded) before reading the scrollWidth of the iframe, which should happen after the new document is loaded.