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

The problem is not to include # in a iframe url, if you try with the next url in your example you will see there is no scroll: http://www.w3.org/TR/scxml/#scxml

So, I reviewed the page that you are showing to see if there is something weird: https://news02ycombinator02com2.mentionusercontent.net/item?id=8357207#up_8360397

If you check the JS it has something like the next:

      var e = window,
    g = document,
    h = "documentElement",
    k = "CriticalImages",
    l = "scrollTop",
    n = "prototype",
    p = "body",
    q = "getAttribute",

There is a function called "scrollTop" which I think is a good candidate to investigate.

If you check the code a little bit more you will see that in some point the JS is getting the offsetTop and the offsetParent:

 u = function(a, b) {
        var c = b[q]("pagespeed_lazy_position");
        if (c) return parseInt(c, 0);
        var c = b.offsetTop,
            d = b.offsetParent;
        d && (c += u(a, d));
        c = Math.max(c, 0);
        b.setAttribute("pagespeed_lazy_position", c);
        return c
    },

Conclusion: the issue is with the page that your are trying to show in your iframe, not with fiddle nor Chrome or # in the urls.

I hope this help.

---

EDIT

After reviewing the wiki example I see that is some js in the fiddle (so the first answer is right).

To avoid this with js you just include this:

$( window.parent ).scroll(function(event) {
   // debugger;
  console.log('SCROLL',event);
  var scrollTop=$(this).scrollTop();
  if(scrollTop>0){
      console.log('fix scroll');
      $(this).scrollTop(0);
  }

});

Example:
http://fiddle.jshell.net/xbnt3Lu6/21/

I will try to review which js is causing the problem.