Menu icon Foundation

My Posts

  • 4
    Replies
  • Magellan wrong scroll target in IE9

    By 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 wr... (continued)

    Last Reply by Bob Sawyer over 4 years ago


My Comments

mike commented on mike's post over 4 years

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

mike commented on mike's post over 4 years

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

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on mike's post over 4 years

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

You commented on mike's post over 4 years

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

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content