Menu icon Foundation
Magellan wrong scroll target in IE9

Hi all,

first of all thanks for a great framework that makes building responsive pages fun :)

I have one issue that I'm not able to resolve myself. The magellan navigation is buggy in Internet Explorer 9. If you click on a link, it scrolls to the wrong position. This can be reproduced on the docs page. Just open the following link in IE9 and use the magellan links. The page always scrolls to the correct position and then it makes a fast movement and goes a couple of pixels further so that the headline of the target section is behind the magellan navbar.

In IE10 and EDGE it is working fine. Only happens on IE9.

http://foundation.zurb.com/docs/components/magellan.html#js

Does anybody have a solution on this?

Thanks
Mike

MagellanIE9

Hi all,

first of all thanks for a great framework that makes building responsive pages fun :)

I have one issue that I'm not able to resolve myself. The magellan navigation is buggy in Internet Explorer 9. If you click on a link, it scrolls to the wrong position. This can be reproduced on the docs page. Just open the following link in IE9 and use the magellan links. The page always scrolls to the correct position and then it makes a fast movement and goes a couple of pixels further so that the headline of the target section is behind the magellan navbar.

In IE10 and EDGE it is working fine. Only happens on IE9.

http://foundation.zurb.com/docs/components/magellan.html#js

Does anybody have a solution on this?

Thanks
Mike

Rafi Benkual almost 5 years ago

You can set an destination threshold in the JS

 $(document).foundation({
"magellan-expedition": {
  destination_threshold: 40, // pixels from the top of destination for it to be considered active
}
});

mike almost 5 years ago

Hi Rafi,

thanks for the reply. I know about the threshold. But as I wrote: This behaviour happens only in IE9.

IE10, IE11, Firefox, Safari and Chrome on Windows and OSX are fine. And it happens also on the foundation docs page if you open them with IE9 native or with IE11 in IE9 mode:

http://foundation.zurb.com/docs/components/magellan.html#js

So if I set the destination_threshold, it will work for IE9, but then the destination will be wrong for all other browsers...

And as I also wrote, it is not only the wrong position for the destination, it is also a very ugly jumping of the page when scolling to the destination. But only with IE9. So it looks like a bug and not like some wrong threshold settings.

Regards
Mike

mike almost 5 years ago

I found the reason for the strange behaviour. In the foundation.magellan.js (version 5.4.7) in line 56 there is the line

 location.hash = '#'+hash;

see in context

$('html, body').stop().animate({
  'scrollTop': scroll_top
}, 700, 'swing', function () {
  if(history.pushState) {
    history.pushState(null, null, '#'+hash);
  }
  else {
    location.hash = '#'+hash;
  }
});  

it the location.hash line is disable (commented out), the page stops jumping in IE9 and scrolls to the correct position and everything looks good. Can anyone confirm this?

Regards
Michael

Bob Sawyer almost 5 years ago

I was just fiddling with location.hash yesterday. It's hard to determine here, but it seems like under normal circumstances, location.hash already contains the '#' ... so by appending it in the magellan script, it's setting location.hash to '##[hashname]' ... right? That's probably not helping things. Instead of commenting out the entire line, change it to this and see if it works:

 location.hash = hash;