Q: Overlay not showing above Capacitor Camera Preview in Android (Vue js + Ionic) I am trying to initiate capacitor-community/camera-preview plugin with Vue 3 (JS) and Ionic 6. I have followed all the solutions suggested in many other threads. Nothing has solved my issue.
When I try toBack: true option, no camera preview is showing. When I set it to false, only camera preview is showing. No overlay is displayed. The app is working as expected in the web browser. But, when I tried with the Android emulator, I have this issue.
Here is my Vue Component.
<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <div id="content">
        <div class="my-overlay">
          <h2>Overlay Text</h2>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script>
  import { IonContent, IonPage, } from "@ionic/vue";
  import { Plugins } from "@capacitor/core";
  export default {
    name: "CameraPreview",
    components: { IonPage, IonContent },
    data() {
      return {
        imageSrc: '',
      };
    },

    mounted() {
      this.startCamera();
    },
    methods: {
     async startCamera() {
        await Plugins.CameraPreview.start({
          parent: "content",
          position: "rear",
          className: "content-camera-preview",
          toBack: true
        });
      }
    },
  };
</script>

<style scoped lang="scss">
ion-content {
   --background: transparent !important;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.my-overlay{
  color: red;
  z-index: 12;
  position: absolute;
  top:30%;
  left:4;
}
.content-camera-preview {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
}

</style>


package.json
{
  "name": "test-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
    "build": "vue-cli-service build --skip-plugins @vue/cli-plugin-eslint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor-community/camera-preview": "^1.2.1",
    "@capacitor/android": "^3.3.3",
    "@capacitor/app": "1.0.7",
    "@capacitor/camera": "^1.2.2",
    "@capacitor/core": "3.3.3",
    "@capacitor/filesystem": "^1.0.6",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/keyboard": "1.2.0",
    "@capacitor/status-bar": "1.0.6",
    "@capacitor/storage": "^1.2.3",
    "@ionic/pwa-elements": "^3.0.2",
    "@ionic/vue": "^6.0.0",
    "@ionic/vue-router": "^6.0.0",
    "axios": "^0.24.0",
    "bulma": "^0.9.3",
    "core-js": "^3.6.5",
    "dom-to-image": "^2.6.0",
    "dom-to-image-more": "^2.8.0",
    "mitt": "^3.0.0",
    "vue": "^3.2.21",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@capacitor/cli": "3.3.3",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "@vue/test-utils": "^2.0.0-rc.16",
    "@vue/vue3-jest": "^27.0.0-alpha.3",
    "babel-jest": "^27.3.1",
    "cypress": "^8.7.0",
    "eslint": "^8.4.1",
    "eslint-plugin-vue": "^8.2.0",
    "jest": "^27.3.1",
    "node-sass": "^5.0.0",
    "sass": "^1.26.3",
    "sass-loader": "^10.0.5",
    "stylelint": "^14.1.0",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-config-standard-scss": "^3.0.0",
    "ts-jest": "^27.0.7",
    "vue-cli-plugin-vuetify": "~2.4.3"
  },
  "description": "An Ionic project"
}


I have added the following style to the main scss file.
ion-content {
  --background: transparent !important;
}

AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Thanks in advance to everyone who tries to answer.

A: I solved this issue by finding the overlayed elements. Adding --background: transparent !important; to ion-content did not solve my issue. Finally, I have inserted transparent background color to the main parent div on App.vue does solve the issue.
App.vue
#app {
  background-color: transparent !important;
}


Also, it is safe to add the following style to the global scss file.
body,
html {
  background-color: transparent !important;
}

