Cordova iOS padding bottom white

[yosa]

Does someone know how to solve this problem?

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 */
}

[yosa]

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

[metalsadman]

@yosa thanks for sharing your fix.

[kms695]

@yosa @metalsadman could you please share a more complete code example? I struggle with the same problem and wonder which element I need to apply the fixSafeArea(t, e) function? Where do you call the function, what exactly is your wrapper? Thx

[kms695]

Okay, what also works is using the QHeader and QFooter, which automatically apply the safe-area-insets