Nav tabs breaks the header on ios

#1

On two of my pages I have the following code:

  $('#tabs').mobiscroll().nav({
      theme: 'ios',
      type: 'tab',
      onItemTap: function (event, inst) {
          $('.md-tab').removeClass('md-tab-sel');
          $('.' + $(event.target).data('tab')).addClass('md-tab-sel');
      }
  });

And it works great in the sense that it creates the tabs along the top. However, on iOS (and only iOS) it breaks any javascript I’m calling from the header. In my case I have a clickable hamburger menu, title bar and reload button. None of which work after running this code. There are no errors or anything but rather it’s like there’s an overlay over the header bar.

I should point out that I’m also using jQuery Mobile which wants me to use the following html:

  <div data-role='header' style='border-bottom:none'>
  <?php
    include("common/header.php");
  ?>
  </div>

This is not a problem on Windows or Android. Any idea what could be causing this and how to get around it?

#2

Hi Vincent,
I will look into this and get back to you as soon as I can!

#3

Thank you. I still haven’t been able to figure this out so I hope you have more success.

#4

I figured out how to solve this problem, and so it appears to be a bug in mobiscroll.

I simply added “display:inline” to the nav initialization and that fixed the issue. So my code now looks like this:

  $('#tabs').mobiscroll().nav({
      type: 'tab',
      display: 'inline',
      onItemTap: function (event, inst) {
          $('.md-tab').removeClass('md-tab-sel');
          $('.' + $(event.target).data('tab')).addClass('md-tab-sel');
      }
  });

The reason I say this is a bug is because according to the documentation, when using type=tab, the default display value is “inline”, but clearly specifying it vs not specifying it makes a difference.

I don’t have a Mac PC so I wasn’t able to debug this to be sure, but it appears that when you don’t specify the display option, the div within which the nav bar sits stretches all the way to the top of the page overlaying anything else that might be there. Again, only on iOS. In my case I’m using an iPhone 6s Plus with iOS version 12.3.1.