I have an incredibly boring summer hobby: looking at the changelog for the WebKit Github repo. Why? Because I spend a chunk of my professional life working with webviews inside mobile apps and I like to get an early peek into what's coming in the next version of iOS. Since Tim Cook has yet to stand up at WWDC and announce "one more thing... Service Worker support in WKWebView, provided you add the correct entry to the WKAppBoundDomains array in your Info.plist " (and you know what, he should) manual research is the order of the day.
So I was really interested to see, the day after WWDC finished, a pull request named:
Liquid Glass was one of the big takeaways from 2025's WWDC. Probably the biggest change in iOS UI since iOS 7 ditched the skeuomorphic look of the past. But that's all native UI, what does any of that have to do with webviews?
A poke around the context of the PR revealed something really interesting: Apple has a custom CSS property named -apple-visual-effect . Not only does it allow the use of Liquid Glass in iOS 26 (via values like -apple-system-glass-material ) but all versions support using standard materials with values like -apple-system-blur-material-thin .
Yes it works and no, we can't
Before you, like me, fire up Safari and start editing some CSS, I have bad news: no, it doesn't work on the web. As well it shouldn't. But it also doesn't work by default in an app using WKWebView, you have to toggle a setting in WKPreferences called useSystemAppearance ... and it's private. So if you use it, say goodbye to App Store approval.
I wanted to try it out all the same so I hacked around to set useSystemAppearance to true, set my CSS to:
.toolbar { border-radius: 50%; -apple-visual-effect: -apple-system-glass-material; height: 75px; width: 450px; }
lo and behold, it works!
0:00 / 0:09 1× With thanks to MapboxGL JS for the beautiful background
... continue reading