Inconsistent scrollwidth for iframe in FF/IE

dom, firefox, iframe, javascript

Solution

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.

Problem

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.

Original source