More info in the Opacity of the WebView section

I do not see the scanner open up when the method is fired. I think this is because the webview is blocking it, because I can see that background: 'transparent'; is applied but I guess it’s not enough. I have tried applying background: 'transparent'; to other layers, like ion-app and ion-content, to no avail.

Any tips or examples of other plugins getting the webview transparent?

I am trying to use this in an Ionic Capacitor app. The scanner doesn’t show up on Android or iOS.

[Jacobra93]

I got it to work by adding:

Android, on the body tag: opacity: 0; background: none;

iOS, on the html tag: opacity: 0;

[tpharaoh]

Thanks @lewdea I tried this based on your idea above and it essentially worked

const startScan = async () => {
        document.body.style.opacity="0.2";
      document.body.style.background = "transparent";
      
       BarcodeScanner.hideBackground(); // make background of WebView transparent

      const result = await BarcodeScanner.startScan(); // start scanning and wait for a result

      // if the result has content
      if (result.hasContent) {
          document.body.style.background = "";
          document.body.style.opacity="1";
        console.log(result.content); // log the raw scanned content
      }
    }