Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

var(--safe-area-inset-*) is 0px when plugin is enabled at capacitor.config.json #40

Open
CyrusNG opened this issue Nov 27, 2024 · 6 comments · May be fixed by #49
Open

var(--safe-area-inset-*) is 0px when plugin is enabled at capacitor.config.json #40

CyrusNG opened this issue Nov 27, 2024 · 6 comments · May be fixed by #49

Comments

@CyrusNG
Copy link

CyrusNG commented Nov 27, 2024

Describe the bug
if plugin is enabled at capacitor.config.json, var(--safe-area-inset-*) is 0px.

To Reproduce
Steps to reproduce the behavior:

  1. Set config as below at capacitor.config.json
{
  "plugins": {
    "SafeArea": {
      "enabled": true,
      "customColorsForSystemBars": true,
      "statusBarColor": '#00000000',
      "statusBarContent": 'dark',
      "navigationBarColor": '#00000000',
      "navigationBarContent": 'dark'
    }
  }
}
  1. Run app
  2. Both top & bottom safe area in css are 0px

Expected behavior
Both top & bottom safe area in css should be the same as status bar & navigation bar's height.

Smartphone (please complete the following information):

  • Device: Samsung S22
  • OS: Android 14

Additional context
I need call following code again to make the top & bottom safe area css as normal:

import { SafeArea } from '@capacitor-community/safe-area';

SafeArea.enable({
  config: {
    customColorsForSystemBars: true,
    statusBarColor: '#00000000',
    statusBarContent: 'dark',
    navigationBarColor: '#00000000',
    navigationBarContent: 'dark',
  },
});

Anyway, I try to call following code, but it does NOT make the top & bottom safe area css as normal:

import { initialize } from '@capacitor-community/safe-area';

initialize();
@tafelnl
Copy link
Member

tafelnl commented Dec 16, 2024

I am not able to reproduce this. Please provide a minimal reproduction repository for further help

@PocketwareStudios
Copy link

PocketwareStudios commented Dec 26, 2024

I have the same issue using it with svelte 5. I build using the svelte static adapter (so mainly SSR), point capacitor to it and --safe-area-inset-top is always max(0px, 0px). I tried with initialize and/or SafeArea.enable.

*** FIXED ***
Make sure to use viewport meta value: <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1" />

@tiecia
Copy link

tiecia commented Jan 7, 2025

I believe I am also experiencing this issue on Android 15. The plugin only sets the var(--safe-area-inset-*) when I enable it from capacitor.config.json AND call SafeArea.enable().

I did some digging and confirmed that when only using one of the enable options the native Android code is correctly figuring out the insets. This line is correctly getting called to set the vars.

webView.loadUrl("javascript:document.querySelector(':root')?.style.setProperty('--safe-area-inset-" + position + "', 'max(env(safe-area-inset-" + position + "), " + size + "px)');void(0);")

However, after that line is run, and I do not use both enable options, the var(--safe-area-inset-*) are still 0px.
image

Intuition suggests that this setProperty() is getting called after the native code sets the vars but I was unable to test this.

function setProperty(position: 'top' | 'left' | 'bottom' | 'right') {

My solution to this issue was to call:

import { SafeArea } from '@capacitor-community/safe-area';

SafeArea.enable({config: {}});

Note: without {config: {}} the app crashes as soon as it is called.

And add the following to capacitor.config.json

{
  "plugins": {
    "SafeArea": {
      "enabled": true
    }
  },
}

@tafelnl tafelnl linked a pull request Jan 23, 2025 that will close this issue
@tafelnl
Copy link
Member

tafelnl commented Jan 23, 2025

Seems like a race condition indeed. This might fix it for you: #49

@leonluc-dev
Copy link

leonluc-dev commented Jan 27, 2025

Encountering the same issue.
I've tried the @tiecia's workaround which seems to work.

I've also tried @tafelnl's PR and it seems to work as well. Hopefully it gets merged soon.

@Will-at-FreedomDev
Copy link

I am seeing similar behavior with using just the capacitor.config.ts, except that the bottom inset is sometimes 0 and sometimes not depending on the workflow.

Upon installation startup and data/cache cleared on android, everything works fine. Once the app is closed and reopened without clearing the data/cache, the bottom inset is evaluated to 0, however the top inset appears to still be working correctly.

Having the configuration in capacitor.config.ts and calling SafeArea.enable({}) worked for me as well as a workaround.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants