question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

More info in the Opacity of the WebView section

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:19 (6 by maintainers)

github_iconTop GitHub Comments

7reactions
Jacobra93commented, Dec 10, 2020

I got it to work by adding:

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

iOS, on the html tag: opacity: 0;

3reactions
tpharaohcommented, Mar 15, 2021

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
      }
    }
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to make a webview transparent? - Vuplex Support
If a web page includes this meta tag and doesn't assign an opaque background via CSS, then its background will be transparent. For...
Read more >
Android WebView style background-color:transparent ignored ...
The background color of the WebView is transparent but as soon as the page is loaded, it's overwritten by a black background from...
Read more >
WKWebView Transparency in IOS 11.3 - Apple Developer
We Initialise WKWebView as follows. I've only tested using Iphone X. Instead of the background of the WebView being transparent, it is completly...
Read more >
opacity - CSS: Cascading Style Sheets - MDN Web Docs
The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and...
Read more >
WebView - Android Developers
To learn more about web browsers, read the guide on invoking a browser with an intent. WebView objects allow you to display web...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found