search

bitpay / cordova-plugin-qrscanner

A fast, energy efficient, highly-configurable QR code scanner for Cordova apps and the browser.
MIT License
574 stars 780 forks source link

iOS transparency issue #253

Open jacobg opened 5 years ago

jacobg commented 5 years ago

I'm having an issue with transparency on iOS 12.2. I see there are other issues on this topic, some old, some new, some open still, some closed. I didn't discover a solution that is working in my case, so I'm opening this issue.

I have a framework7 vue app running in UIWebView, and show the scanner in the page:afterin event. It works fine and renders fine as long as I don't have any <img> elements in the overlaying <div>. Once I add an <img> element, the screen is either white or black, depending on whether I set the div transparency before or after showing the scanner. If I open Safari Developer Tools on my Mac to inspect the application webview, it will then magically become transparent and everything looks great.

It seems like some iOS or Safari refresh bug. I tried all kinds hacks in setTimeouts to undo and redo styling changes, reorder the operations of showing the scanner and changing css, etc. But nothing helps. Any ideas???

jacobg commented 5 years ago

After trying dozens of workarounds, running the following code after calling QRScanner.show() seems to work:

      document.body.style.visibility = 'hidden'
      setTimeout(() => { document.body.style.visibility = 'visible' }, 1)

It's better to set visibility than display, because setting display messes up alignment of framework 7 nav bar title.

Is anyone able to articulate exactly why this is necessary? Is this a known Safari bug? Is there a ticket filed with Apple?

jordodev commented 5 years ago

@jacobg You, sir, are a gentleman and a scholar!

I was experiencing a very similar issue using ionic and tried every CSS hack I could think of. Also noticed when opening safari developer tools it magically became transparent as expected. The problem only effects iOS 12.2. No issue on other versions or Android. Would also love to know what changed.

I used your workaround for now. Thank you!

GomesGokuBR commented 5 years ago

I found a track, under ionic 3, in the component <ion-nav> I have a tag <div nav-viewport> </ div> when I apply to this tag visibility: hidden, j I have my camera that appears, with my components that stack, in short, it happens only in IOS, because with android no problem. Sorry for my English.

GomesGokuBR commented 5 years ago

There is a relationship with nav-viewport, ios.

z1429170900 commented 5 years ago

Very perplexed. My ipad is black screen when i use this plugin, what i can do. android is fine.