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
Source code
Preview
Implementation page
Plugin page
Happy building!
Gabriel Cardoso
Media Nova, 2022
5 Likes
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?
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
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
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
Hi,
How would I go about adding a webkit, is something I can do in bubble or does it need done externally?
Thanks
Alan