Wrong padding-top calculation for .q-page-container div in iOS PWA

[mkarras]

trafficstars

Describe the bug Wrong initial padding-top calculation on .q-page-container div for IOS PWA with padding-top: env(safe-area-inset-top) in q-header div.

Expected behavior The padding-top calculation for the q-page-container div considers the height of header, also when the app was initial loaded.

Screenshots

Platform (please complete the following information): OS: iOS PWA

Additional context

• when the mobile phone is switched to landscape and back, the calculation/padding is right.
• padding-top: env(safe-area-inset-top) in q-header div is used with appleMobileWebAppStatusBarStyle: 'black-translucent' inside the vue.config.js to achieve that the header color is part of the iOS status bar.

[pdanpdan]

Hello. I don't understand what 'vue.config.js' you are talking about in additional context, can you give mode details? Also please make a small codepen with a minimal code that would reproduce the problem when used as PWA.

[mkarras]

Hello. I don't understand what 'vue.config.js' you are talking about in additional context, can you give mode details?

I'm using the Vue CLI approach. There you can use a global config file (vue.config.js) described here: https://cli.vuejs.org/config/#global-cli-config In this config you can configure PWA settings besides a lot of other things. More or less like the quasar.conf.js when Quasar CLI is used.

iOS provide several options how the status bar appear in PWA. Described here: https://medium.com/appscope/changing-the-ios-status-bar-of-your-progressive-web-app-9fc8fbe8e6ab To achieve that there is no status bar height, my vue.config.js file looks like this: module.exports = { ..., pwa: { ... appleMobileWebAppStatusBarStyle: 'black-translucent', ... } }; This leads to that <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> is added to the application strictly speaking to the head of index.html. The height of status bar is now gone.

To avoid the UI to overlap with the status bar clock, text and symbols, i need to add some additional space to the UI. Therefore you can use env(safe-area-inset-top) in CSS to define the top safe area only applied when the application running as PWA in iOS. The variable value depends then to the users device (e. g. different values for iPhone 6 or iPhone X). I added padding-top: env(safe-area-inset-top, 0); to .q-toolbar to achieve this. Quasar has some code to set the offsets and heights of some layout components. For example the padding-top of div with .q-page-container class. For some reason it does not recognize the real height of q-toolbar when env(safe-area-inset-top, 0); is used. But it recognize it right when the orientation is changing (from landscape to vertical).

To fix this i need to overwrite the padding-top calculation of Quasar on the div with class .q-page-container with: padding-top: calc(50px + env(safe-area-inset-top, 0)) !important;

Also please make a small codepen with a minimal code that would reproduce the problem when used as PWA.

https://codepen.io/MTOTHEK/pen/vYLqgEe?editors=1100

I hope this is understandable enough and helps to solve the problem.