Navigator inside splitter iOS problem

kk

I have the occuring topic combining the splitter and the navigator.
It’s basically working and I tested it on Android and iPhone with iOS 10.3.3, but it isn’t working on an iPhone with iOS 11.0.0.
The splitter is opening but I just can’t click any “links” in the navigation to open the new pages.

Here is my code:

The splitter with the navigator:

<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html')" tappable>
          Home Page
        </ons-list-item>
        <ons-list-item onclick="fn.load('1.html')" tappable>
          1
        </ons-list-item>
        <ons-list-item onclick="fn.load('2.html')" tappable>
          2
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content">
    <ons-navigator swipeable id="myNavigator" page="home.html"></ons-navigator>
  </ons-splitter-content>
</ons-splitter>

And the javascript part:

window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page, data) {
  var content = document.getElementById('myNavigator');
  var menu = document.getElementById('menu');
  content.pushPage(page, data)
    .then(menu.close.bind(menu));
};

window.fn.pop = function() {
  var content = document.getElementById('myNavigator');
  content.popPage();
};

I tried multiple solutions, but nothing is working on the new iPhone.

Thanks in advance.

Fran Diox

@kk Hi! That’s weird, the code seems fine. Can you try replacing the content of ons-splitter-side with normal div tags and see if the onclick is triggered? Didn’t have the chance to test iOS 11 myself yet…

Navigator inside splitter iOS problem browsing