layout gallery WhatsApp.Vue

[diadal]

1: Status bar override
2: message box covered with the grey color
3: Drawer covered with grey color

OS: MacOs
Node:
NPM:
Yarn:
Browsers:
iOS: iPhone 11 Pro Max
Android:
Electron:

Additional context
Add any other context about the problem here.

[pdanpdan]

Are you using cordova or capacitor, are you on real device or on emulator.
Also the code to reproduce would help - I'm pretty sure that the sample layout in docs is only as an example and should be checked and adjusted if you want to use it, so please provide the code you are using.

Thank you

[diadal]

capacitor on emulator.

https://github.com/quasarframework/quasar/blob/dev/docs/src/layouts/gallery/whatsapp.vue

[diadal]

the issue same on cordova

[diadal]

I got this from Xcode maybe it can help

<WhatsappLayout> at src/pages/Chat.vue
       <App> at src/App.vue
         <Root>
2020-02-19 12:25:51.124293+0100 App[28208:1663217] API error: <_UIKBCompatInputView: 0x7fd294f239c0; frame = (0 0; 0 0); layer = <CALayer: 0x600000160b80>> returned 0 width, assuming UIViewNoIntrinsicMetric
2020-02-19 12:25:51.124671+0100 App[28208:1663217] API error: <_UIKBCompatInputView: 0x7fd294f239c0; frame = (0 0; 0 0); layer = <CALayer: 0x600000160b80>> returned 0 width, assuming UIViewNoIntrinsicMetric
2020-02-19 12:25:51.177005+0100 App[28208:1663217] [Snapshotting] Snapshotting a view (0x7fd294e12e20, _UIReplicantView) that has not been rendered at least once requires afterScreenUpdates:YES.

[diadal]

Please any update on this

[diadal]

so far am able to do something but not sure if is the best
1 <div :class="'WAL position-relative bg-grey-4 '+ $q.platform.is.ios ? ' ios-class' : ''" :style="style">

<style lang="sass">
.ios-class
  padding-top: 40px !important
  padding-bottom: 35px !important

.....

2 creating child route

{
    path: '/chat',
    component: () => import('pages/Chat.vue'),
    children: [
      { name: 'chat-room', path: '', component: () => import('pages/m/ChatMessage.vue') }
    ]
  },

than I got this

but after rotating simulator left and right this issue come back

but when I change page then come back it look good once again

[vycoder]

Have you tried setting iosStatusBarPadding to true under capacitor.config.json?

[diadal]

no never try that but have create new one