Capacitor Edge-to-Edge & Safe Areas

[zanzara]

i dont know exactly if this might be a Quasar issue, but running latest capacitor v8 (> 8.3.2) and latest app-vite3.9.0 cannot use the Edge-to-Edge Mode in Android 16+
There have been changes which are described perfectly here:
https://capawesome.io/blog/capacitor-edge-to-edge-and-safe-areas-guide/

While migrating my app from app-vite2 and capacitor v7 to app-vite3 and capacitor v8 , i saw that Edge-to-Edge mode didn't worked anymore on Android 16/17
I have added then this to app.scss

body.platform-capacitor {
  padding-top: 0 !important;
  margin-top: 0 !important;
  .q-layout {
    min-height: 100vh !important;
  }
  .q-page-container {
    padding-top: 0 !important;
  }
  .q-header {
    top: 0 !important;
    position: fixed !important;
    padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) !important;
  }
  .q-footer {
    padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) !important;
  }
}

which did the remedy.

in capacitor.config.js it's recommended to set this: insetsHandling: "css", but it is yet the def.value.

  plugins: {
    SystemBars: {
      //insetsHandling: "css",  // default val
      style: "DARK"
    },

any comments are welcome

[dfbustosus]

Capacitor's edge-to-edge drawing and safe-area compensation are separate concerns. Drawing under the system bars is expected; content that must remain unobscured still needs inset handling.

SystemBars.insetsHandling: "css" can remain omitted because css is already the Capacitor 8 default. It injects --safe-area-inset-* on Android, with env(safe-area-inset-*) as the browser fallback.

Quasar also defaults framework.config.capacitor.androidStatusBarPadding to true. Its current guidance says common cases involving QHeader, QFooter, dialogs, and notifications already receive safe-area handling. I would therefore avoid globally overriding .q-layout, .q-page-container, and .q-header geometry: those declarations can replace QLayout's calculated offsets and may double-apply an inset when Quasar's compensation is still enabled.

Use one owner for the padding:

• Keep Quasar's default enabled and use the inset variables only on custom elements placed at a screen edge.
• Or set framework.config.capacitor.androidStatusBarPadding: false if the application deliberately owns all header/footer safe-area padding itself.

Also verify that the viewport contains viewport-fit=cover; the Quasar Capacitor template includes it by default.

References: Quasar's safe-area guidance, androidStatusBarPadding configuration, and Capacitor's System Bars Android behavior.