Cordova iOS padding bottom white



  • Does someone know how to solve this problem?

    Screen Shot 2019-09-20 at 23.16.15.png

    Quasar info

    Operating System - Darwin(18.7.0) - darwin/x64
    NodeJs - 12.10.0

    Global packages
    NPM - 6.11.3
    yarn - 1.17.3
    @quasar/cli - 1.0.0
    cordova - 9.0.0 (cordova-lib@9.0.1)

    Important local packages
    quasar - 1.1.2 – Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
    @quasar/app - 1.1.1 – Quasar Framework local CLI
    @quasar/extras - 1.3.1 – Quasar Framework fonts, icons and animations
    vue - 2.6.10 – Reactive, component-oriented view layer for modern web interfaces.
    vue-router - 3.1.3 – Official router for Vue.js 2
    vuex - 3.1.1 – state management for Vue.js
    electron - Not installed
    electron-packager - Not installed
    electron-builder - Not installed
    @babel/core - 7.6.0 – Babel compiler core.
    webpack - 4.40.2 – Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, … and your custom stuff.
    webpack-dev-server - 3.8.1 – Serves a webpack app. Updates the browser on changes.
    workbox-webpack-plugin - 4.3.1 – A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
    register-service-worker - 1.6.2 – Script for registering service worker, with hooks

    Quasar App Extensions
    None installed

    Try this

    body {
    padding-top: constant(safe-area-inset-top); /* iOS 11.0 /
    padding-top: env(safe-area-inset-top); /
    iOS 11.2 */
    }



  • I share the solution I found using the constant or env helper css.

    import { Platform } from ‘quasar’

    export default {
    fixSafeArea (top, element) {
    if (!Platform.is.iphone) {
    return
    }
    const wrapper = document.querySelector(element)
    const style = top ? [
    top: calc(${top} + constant(safe-area-inset-top));,
    top: calc(${top} + env(safe-area-inset-top));
    ].join(’’) : [
    ‘top: constant(safe-area-inset-top);’,
    ‘top: env(safe-area-inset-top);’
    ].join(’’)
    if (!wrapper) {
    console.error(‘wrapper not found’, element)
    return
    }
    wrapper.setAttribute(‘style’, style)
    return wrapper
    }
    }



  • @yosa thanks for sharing your fix.


Log in to reply