iframe causes parent elements to scroll up on Google Chrome when URL contains fragment

Question

On Google Chrome (37.0.2062.122, OSX / Windows), an iframe with an URL containing a fragment causes the parent elements to scroll up.

It\'s only happening in Chrome (tes

Answer 1

Revised Answer

There are two bugs being displayed here.

1. JSFiddle looses part of it's header when loading an iFrame with a fragment. This is discussed in other answers and in my "Old Answer" section. And a github issue has been raised.
2. iFrames on chrome handles fragments badly. They cause scrolling on the parent. (This may be desired behavior to be fair).

Chrome iFrame problem

When you run this, your window will scroll so that the fragment in the window is at the top of your page:

As you can imagine, this causes issues in certain fixed height websites like jsfiddle. It is also unique to Chrome (I've only tested on FF, not IE), Firefox doesn't scroll the parent window. There is a discussion about it not being in FF here.

Chrome iFrame parent scrolling fix

Fiddle

Add an onload event to the iframe that calls the following function. And don't use the fragment in the original:

As you can see in both the fiddle and the above snippet, the parent window no longer scrolls and the behavior is now the same for both FF and Chrome.

Source for fix.

Old Answer (alternate fix for jsfiddle)

Okay, so I did some testing:

• Issue only on Chrome
• Issue occurs with any fragment linked page: example
• Issue is specific to jsfiddle. CodePen and jsbin work fine.

So as a temporary workaround either use one of those or inject this into jsfiddle's html:

margin-top: 30px; into the header bar like:

Bit of a pain though since it needs to be done everytime you load jsfiddle (but not every time you run the fiddle).

To get the problem fixed, it should be reported on the jsfiddle github page: https://github.com/jsfiddle/jsfiddle-issues/issues

Edit

And here is a way to automate it on chrome: Download the stylebot extension, and add this style to jsfiddle.com (or the specific fiddle):

#header {
    margin-top: 30px;
}

It works pretty well.