Side-panel not opening after iPhone X changes?


#1

Using ^2.2.5 and using kitchen-sink template wrapped in cordova: https://github.com/framework7io/framework7-vue/tree/master/kitchen-sink

There’s a strange procedure where you add a special “splash screen” to display on iPhoneX full-screen: https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493

        <splash src="res/screen/ios/[email protected]~universal~anyany.png" />

After this change side-panels no longer fire (in simulator & native device, but interestingly not on browser) ex a button like this:

      <f7-list-button title="Open Left Panel" color="green" panel-open="left"></f7-list-button>

Main App.vue looks like this (the panel-open behavior fails in iPhoneX simulator and on device itself after this change):

<template>
  <div id="app">
    <f7-statusbar></f7-statusbar>
    <f7-panel left cover>
      <f7-view url="/panel-left/" links-view=".view-main"></f7-view>
    </f7-panel>
    <f7-panel right reveal>
      <f7-view url="/panel-right/"></f7-view>
    </f7-panel>
    <f7-view url="/" :main="true" class="ios-edges"></f7-view>
  </div>
</template>
<script>
  import { f7Panel, f7View, f7Statusbar } from 'framework7-vue';

  export default {
    components: {
      f7Panel,
      f7View,
      f7Statusbar,
    },
  };
</script>
<style>
</style>

Has anyone encountered this behavior before and has a fix? It’s a bit unclear how this cordova-specific splash-screen configuration affects the screen-sizing (let alone side-panel behavior)

Removing the splashscreen in config.xml brings the menu back in simulator & native


#2

To be honest, can’t even imaging how it can be related. I have numerous apps created with cordova and panel works there without any problems on iPhone X