[v3] Error/Bug on IphoneX

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
  // Statusbar
  // Right Panel
  // Main View
  f7-view#main-view(url='/login', :main="true", data-name="main")
  // Popup


import {mapActions} from 'vuex'
import Routes from './routes.js'
import TermsPopup from './components/terms-popup'
import PanelRight from './pages/panel-right'
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: {

Terms popup layout

<template lang='pug'>
          .title Terminos y condicones
            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


<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;

panel right layout

<template lang='pug'>
f7-panel(right='', cover='')
  f7-view(url='/panel-right/', data-name="right-panel")
      f7-navbar(title='Menu', sliding='')
        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')

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">


    <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

I have several apps running on v3 and I don’t see such issues on iPhone X. Maybe you can zip your Xcode project and pm me link to it so I can check?

Thanks nolimits, just fixed it, i dont know if it is bcs i have a bad layout or something strange with f7;
To fix popup overlay just change vue layout to f7-NO-vue layout

    My Content



Dont know why but vue layout didnt add the view tag to the popup so maybe thats was the problem.

and for the right panle just add style;

  height: 100%;

Will keep testing, on simulator works fine, now i will ask the tester to test it in a true phone.
if you still want me to pm you the xcode zip, let me know, i will gladly zip it to you.

edit: i manage to solveit by comparing my vm with simulator (iphonex) vs my windows pc with chrome mobile (iphonex) and reading tag by tag the diferences.

Yeah, still would be good to check Xcode project but the one where you have issues with F7-Vue components. Maybe there is a bug of F7/F7-Vue side

Ok, will upload when i get home. with both errors/bugs

1 Like