Just playing around with Safari's new feature: Backdrop Blur
Performance is pretty great!
Awesome. Any idea how the change the color of the blurred element? Because when I apply a background color it kills the blur effect.
You could try using background-blend-mode and a background color?
Well the fix I came up with was to create the blur as a superLayer and then insert whatever color I wanted as a sublayer. Perhaps not the cleanest fix but it works exactly as I would want. Here's an example recreating iOS navigation bar:
navbarBlur = new Layer width: 640 height: 96 shadowY: 1 backgroundColor: "transparent"navbarBlur.style["-webkit-backdrop-filter"] = "blur(10px)"
navbar = new Layer superLayer: navbarBlur width: 640 height: 96 shadowY: 1 backgroundColor: "#FFFFFF" opacity: .8 shadowColor: "rgba(0,0,0,.1)"
hello, I am trying to add some blur to the background but it does not work, just works when i hover the element in the elements tree, what could be happening? i am using @dockView.style["-webkit-backdrop-filter"] = "blur(30px)"