0

How can I set up a popup window in an Android Cordova application to have a blurred background? The content behind it will not be known in advance, and may contain both images and other components from multiple sources. It will not necessarily only appear over a single image. The effect I'm looking for will look something like this:

blurred popup

Things I've investigated so far:

  • The approaches described in the answers to Background blur with CSS, which tend to rely on having the background already available as an image (e.g. here's a modification of the accepted answer that shows that only the background image gets blurred, and that any text placed on top of the background is lost by the effect), or use the CSS property backdrop-filter which isn't currently implemented on Android's web view component.
  • Using html2canvas and similar approaches to generate an image then blurring the image. This sort-of works, but is too slow to use on complex layouts on low end phones, resulting in an unacceptably long delay before the popup appears.

Is there another approach that can make this work?

Community
  • 1
  • 1
Jules
  • 14,841
  • 9
  • 83
  • 130

2 Answers2

1

If you use crosswalk-plugin for android, add --enable-experimental-web-platform-features to XWALK_COMMANDLINE, then you can use backdrop-filter, but It still have some bug. you can test this feature in you chrome, open chrome://flags and open enable-experimental-web-platform-features.

user2053153
  • 196
  • 1
  • 5
0

Did you try svg filter? Maybe this can help you https://www.w3schools.com/graphics/svg_fegaussianblur.asp :)

Gabbr Issimo
  • 111
  • 9
  • Please add the relevant parts from the link to your answer. – rollstuhlfahrer Mar 11 '18 at 13:13
  • Yes. The link in the question to [this jsfiddle](http://jsfiddle.net/9pc8ffpu/) is based on the SVG feGaussianBlur. As far as I can tell, you can only use it to blur the background, but not any components that are on top of it. – Jules Mar 11 '18 at 13:52