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/Default@2x~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