Question

I have a webpage for which I grab the html, send it through websockets via socket.io to another page with an empty iframe, and dynamically insert the html into the iframe.

The code I use to insert the html is the following:

frame.open();
frame.write(html);
frame.close();

However, it seems that the some of the size and spacing of the DOM elements are rendered slightly differently from the original page.

Here are two screenshots to show you what I mean. It’s hard to see the differences, but the search bars on the top have slightly different lengths, and the titles of each song have slightly different distances from the large thumbnail:

The original page:

The page with the iframe with dynamically inserted html

The only difference in the html is the changing of relative urls to absolute urls. Besides this, the html, browsers, and window sizes are the same. Also, the css styling is the same.

What is going on here?

Answer 1

Some default settings like margins and paddings differ between quirks and standards mode.
So make sure that The DOCTYPE declaration is the same as the original.

Or more formally, if the original page has any DOCTYPE declaration that triggers standards mode, the source in your iframe needs to have a DOCTYPE like that as well. (Doesn’t have to be identical, as long as they trigger the same mode.)