Hi,
I migrated a small app from v2 to v3. Everithing works fine. Until one tester with iphonx had problems with the app;
- Popup content dont show
- Cant open right panel
From my understanding it seems that both popup and rightpanle are behind mainView area.
Tested on ios and androiod, works fine, the error is on IphoneX.
app.vue layout:
<template lang='pug'>
// App
f7-app(:params='f7params')
// Statusbar
f7-statusbar
// Right Panel
panel-right
// Main View
f7-view#main-view(url='/login', :main="true", data-name="main")
// Popup
terms-popup
</template>
js:
import {mapActions} from 'vuex'
import Routes from './routes.js'
import TermsPopup from './components/terms-popup'
import PanelRight from './pages/panel-right'
'framework7-vue';
export default {
name: 'app',
components: {
panelRight: PanelRight,
termsPopup: TermsPopup
},
data () {
return {
f7params: {
id: 'com.myApp.app', // App bundle ID
name: 'MyApp', // App name
theme: 'ios', // Automatic theme detection
routes: Routes
}
}
},
methods: {
...mapActions(['setActiveTab'])
}
}
Terms popup layout
<template lang='pug'>
.popup.terms-popup
.view
.page
.navbar
.navbar-inner
.title Terminos y condicones
.page-content
.block.block-strong(v-html='terms')
.block
.row
button.col.button.button-fill.button-big.accept-button(@click='accept') Acepto
button.col.button.button-fill.button-big.no-accept-button(@click='noAccept') No acepto
</template>
style:
<style scoped>
.page-content {
background: rgba(244, 244, 244, 1);
}
.accept-button {
border-radius: 0px;
background: #fff !important;
color: #30CEAE !important;
}
.no-accept-button {
border-radius: 0px;
background: rgba(255, 255, 255, 0.7) !important;
color: gray !important;
}
</style>
panel right layout
<template lang='pug'>
f7-panel(right='', cover='')
f7-view(url='/panel-right/', data-name="right-panel")
f7-page
f7-navbar(title='Menu', sliding='')
f7-list
f7-list-item.panel-close(link='/', title='Inicio', view='#main-view')
f7-list-item.panel-close(link='/profile/', title='Mi perfil', view='#main-view', @click='setTab')
// f7-list-item.panel-close(link='#', title='Descargar ultima Base de datos', @click='getLastDB', v-show='oldDB')
f7-list-item.panel-close(link='#', title='Descargar ultima Base de datos', @click='getLastDB', v-show='true')
f7-list-item.panel-close(link='#', title='Bases y condiciones', @click='getTerms')
f7-list-item.panel-close(link='#', title='Cerrar session', @click='logOut')
f7-list-item.panel-close(link='#', title='Salir de la aplicacion', @click='closeApp')
</template>
And here is some screenshots taken from simulator IphoneX:
As you can see, there is a gray overlay, that is part of the popup;
Here is where the content should appear:
iphone 8 screenshot:
more info:
html tags
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#2196f3">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
config.xml
<preference name="phonegap-version" value="cli-8.0.0" />
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="false" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="android-minSdkVersion" value="23" />
<content src="index.html" />
<splash src="splash.png" />
<icon src="icon.png" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.1" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
<plugin name="cordova-plugin-device" spec="^2.0.1" />
<plugin name="cordova-plugin-inappbrowser" spec="^3.0.0" />
been struggling with this problems the last 2 weeks.
Any advice will be helpful