How to make iOS re-render the webview background as transparent

[Ethan9001]

I have used a lot of ways to set the element transparent, still no effect. But in the debugging time, switch the background when the transparent style will be successful. Said do not understand

[mljsgto222]

I fixed that by change the position of a element after QrScanner.show().Test on iOS 10.2 and 10.3. I think it is because webview does not render elements that are under opaque elements, and setting background will only make it redraw the element. So you need to trigger reflow to render it.

[fahadpathan]

How you have changed the position?

[mljsgto222]

@fahadpathan The body position is 'fixed' In the Ionic, so I just changed it to 'static' in callback of QrScanner.show().

[fahadpathan]

@mljsgto222 I have added background ''transparent' inside QrScanner.show();.

[mljsgto222]

@fahadpathan I mean you need to trigger Webview to reflow. I changed the body position, you can also use other ways. But changing background will only trigger the browser to repaint.

如果你懂中文的话。。这个问题我认为是iOS的Webview没有渲染不透明元素底下的元素导致的，这就是为什么在debug模式下面你只要重复让背景透明问题就解决了。因为修改css的backgournd属性只会让浏览器重绘（repaint）这个元素，而背后的东西仍然没有被渲染。所以我通过修改css的position属性来让浏览器重绘（reflow)整个页面，你也可以修改其他的属性，只要能触发reflow就行。

这是我个人的见解。| ω・´)

[fahadpathan]

@mljsgto222 Yes I repainted browser, as we need customer layout for QR Code similar to WhatsApp QR Code scanner.

[bitjson]

Hey @fahadpathan and @mljsgto222 – were you able to solve this issue? Making the webview transparent in iOS is somewhat finicky, and depending on your app, you might need to do some adding/removing CSS elements to trigger the view to be redrawn as transparent. You can see https://github.com/bitpay/copay for an example. (Links to the live version in app stores here: https://bitpay.com/wallet)

If you have any ideas for how we can modify this plugin to work better "out-of-the-box", I'd love to take a pull request!