[New Plugin] Glass Effect Plugin

Showcase
1

Hi Everyone

With this plugin you are able to create the glass effect and assign to elements according to their ID attribute.

How to use it:

  • Turn on the Attribute ID in your page settings
  • Assign IDs to the elements you want to apply the effect
  • On page load: insert the Glassify action to toggle the style of the group element

:electric_plug: Source code
:eyes: Preview
:page_facing_up: Implementation page
:sparkles: Plugin page

Happy building!
Gabriel Cardoso
Media Nova, 2022

5 Likes
2

Hi,

I like this plugin a lot, however it isn’t working when I test on an iPhone. On android it works completely as expected, but on iphone it over-writes the colours as expected but doesn’t blur. Are you able to help please?

3

Hi Alan,
Thank you for using our plugins!
Could you please provide the name and if possible the version of the browser you are using on the iPhone?

Best regards
Gabriel C.
MediaNova

4

Hi,

I’m testing it via the BDK Native app as we will be wrapping the app, however it behaves the same way in safari on iOS 15.5.

Thanks
Alan

5

Hi Alan,

For safari we included a fallback to webkit-backdrop-filter. Which is the CSS rule responsible for blurring the background. Safari uses a CSS called webkit-backdrop-filter instead of the backdrop-filter.
https://caniuse.com/?search=-webkit-backdrop-filter

Live Browser on Safari 9.1

The supported Safaris need a webkit to run this rule. I am not sure how BDK works, but you might need to build and include webkit as dependency? I am not sure.

Best regards
Gabriel C.
MediaNova 2022

6

Hi,

How would I go about adding a webkit, is something I can do in bubble or does it need done externally?

Thanks
Alan