Magellan not working on Ipad #1235

Closed
bhardy opened this Issue Nov 30, 2012 · 8 comments

Projects

None yet

5 participants

bhardy commented Nov 30, 2012

Long story short, this is the mobile version of a website we're working on:

http://vfs.com/viewbook/mobile/local-index.php

The magellan navigation isn't working on ipad. It works in every other browser.

The first menu-item you click it will work, but if you click another it won't do anything . If you scroll the page a tiny bit it will work again.

At first I thought it was because I was using jquery to animate the scrolling and mobile-safari wasn't finishing scrolling, but I disabled that script and I'm having the same issue.

Any help would be great!

@mhayes mhayes was assigned Dec 5, 2012
bhardy commented Jan 2, 2013

Any update on this? I also want to note that the url has changed to: http://vfs.com/viewbook/?forceMobile=true

Thanks.

Contributor
mhayes commented Jan 2, 2013

Hey @bhardy I just visited that second link (http://vfs.com/viewbook/?forceMobile=true) on my iPad (iOS 6.0.1 using Safari). Here's the steps I took to test the page:

  • Clicked on "Story" link, this menu item became active.
  • Clicked on "City" link, this menu became active
  • Scrolled up and the "Faculty" menu item became active

So it appears that Magellan is working as expected. It's possible this could be related to a bug with Safari, can you confirm what version of iOS you're running? Thanks!

bhardy commented Jan 2, 2013

Hm, you might be right. I'll check the version as soon as the thing charges enough to turn it on!

bhardy commented Jan 2, 2013

Must have been IOS. Just updated and it works. Thanks!

Contributor
mhayes commented Jan 2, 2013

Cool, sounds like it was most likely a Safari issue that has been addressed then. I'm going to consider this issue closed at this time, cheers!

@mhayes mhayes closed this Jan 2, 2013

@mhayes : it is perhaps a Safari issue, but unfortunately it hasn't been addressed.
I just tested the magellan component page on iOS5 and of course, it doesn't work as expected : the links becomes inactive when you first click on one other.
The given solution (updating to iOSx) is not solving the problem (it solves in fact, but "upgrade please" is not an acceptable solution : On visitor with iOS will just consider the website isn't working)

spirosdi commented Jan 2, 2014

i am also having the exact issue in mobile Safari iOS 7.0.3 both in iPhone and simulator. The steps to reproduce it are:

  1. visit http://foundation.zurb.com/docs/components/magellan.html
  2. scroll down until the data-magellan-expedition gets its fixed-position
  3. click on a data-magellan-arrival link - at this point the address bar gets larger and pushes the fixed top: 0 content down. The thing is that the content is pushed only visually. The clickable area is not pushed down. It remains under the address bar and you cannot click on it.

At the moment i cannot say if it is an iOS or Foundation bug.

One workaround i found (i am sure there is a more efficient way) is to:
$('.sub-nav').click(function(){
setTimeout(function() {
$(window).scrollTop($(window).scrollTop()+1);
}, 100);
});

@spirosdi spirosdi added a commit to spirosdi/polilimnio-backbone that referenced this issue Jan 2, 2014
@spirosdi spirosdi // fix: zurb/foundation-sites#1235 bug b494ffa

workaround didn't work on my old iPad iOS5, now I'm hiding the fixed clone of magellan container on iOS < 8 (iOS8 works perfect), testet with foundation 5.4.7

app.js:

  if(navigator.userAgent.match(/iPad/i)) { 
    if (match = /OS (.*) like Mac OS X/.exec(navigator.userAgent)) { 
      var version = match[1].replace('_', ''); 
      version = parseInt(version[0], 10); 
      if (version < 8) { 
        $(".magellan-container").addClass("ipad-hack");
      } 
    } 
  }

style.css:

  .magellan-container.fixed.ipad-hack {
    display: none !important;
  }
@mhayes mhayes was unassigned by bhardy Jan 10, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment