9 ms·
Apple has a private CSS property to add Liquid Glass effects to web content
- iruoy 1y ago> It stands to reason that Apple wouldn't have developed this feature if they weren't using it. Where? We have no idea. But they must be using it somewhere. The fact that none of us have noticed exactly where suggests that we're interacting with webviews in our daily use of iOS without ever even realising it. This is what stood out to me. I've never really suspected webviews and can't think of a place now.
- JakaJancar 1y agoI often suspect things in Settings, esp. account/iCloud section to be webviews, just based on how they load (icons appearing a short moment after the page opens for example).
- ciabattabread 1y agoWhen you tap some of the menu items in the “Saved to iCloud” section, they don’t have the normal grey item highlight that happens with the rest of the settings app.
- JimDabell 1y agoYes, those parts of the Settings app are built with web views that embed React Web: https://news.ycombinator.com/item?id=30648424 https://news.ycombinator.com/item?id=30648424
- mastercheif 1y agoOh so that's why they're terrible and often break with no error messaging or recourse
- JimDabell 1y agoProbably, but it’s not as if the native parts of Settings are much better.
- dcarmo 1y agoThe App Store app seems to be using web views extensively.
- monocularvision 1y agoIt is not. Apple made a big deal about the changeover a few years back.
- echeese 1y agoI assume they're going to use it on Apple.com, the same way that they were using backdrop-filter to simulate the frosted glass on earlier iOSes
- bstsb 1y agoaccording to the post, it doesn't exist on Safari
- alwillis 1y agoBoth Mail and Calendar use web views for starters.
- ivape 1y agoI’m sure there are many apps like the Apple Store app and parts of the App Store that pull in web views. That’s most likely what this is for. Probably parts of News, Music, Games apps as well.
- quartz722a8c 1y agoI’m fairly certain Apple Music makes pretty heavy use of webviews.
- galad87 1y agoActually it does not. It used to, but then was rewritten. The Accessibility Inspector app can be used to see what's the class of the UI elements, if you want to check.
- olivia-banks 1y agoI think it still might. I use it all the time on my laptop, and periodically if I do something funky with the network, the entire view panel says that there was an internal server error in that classic no-CSS Times New Roman font. Do you have a source for this?
- galad87 1y agoAs I wrote above, use Accessibility Inspector to inspect the UI.
- snackbroken 1y agoProviding an OS feature only to first-party programs is a plainly anticompetitive practice. Using your privileged position in one market (cell phones/cell phone operating systems) to gain an advantage in another market (smart phone applications) that you withhold from your competitors is a textbook case.
- ivape 1y agoShouldn’t this be easily available in Electron/Tauri and React Native apps?
- robertoandred 1y agoReact Native / Expo apps can get liquid glass via the actual underlying native ui elements.
- jakelazaroff 1y agoElectron doesn't use WebKit, so definitely not. Not sure about Tauri desktop, but how would you use it for Tauri mobile and React Native?
- ivape 1y agoWoah, TIL. Chromium apparently forked WebKit in 2013. wtf? So, if you wanted webviews that could leverage this you’d basically need a native swift app with webviews to get access.
- zamadatix 1y agoEven if you could get it you wouldn't be able to publish it on the App Store due to the permission it requires.
- integralid 1y agoI wanted to be outraged at apple, but I really can't. Read WinAPI documentation and try to count all "reserved" parameters for example. OS developers build features just for internal use all the time. Granted, this is just UI tweak so I'm not convinced it has to be private, but they probably just don't want to have to maintain that forever.
- mikeaskew4 1y ago[flagged]
- seydor 1y agoLet's pray this liquid jelly doesnt become a trend
- Insanity 1y agoSame boat as you - hope it doesn't but I'm pretty sure it will. Apple is doing it, so other companies will jump on the same bandwagon.
- thewebguyd 1y agoYounger generation is obsessed with nostalgia for Aero/Glass and that whole era's aesthetic. It will definitely become a trend, if not for that then because Apple did it and the industry has lost all innovation outside of "copy whatever Apple does."
- jonathanlydall 1y agoWow, I didn't stop to think how Windows Vista is actually quite close to 20 years old now. It and Windows 7 still feel "modern" in my mind.
- jeroenhd 1y agoAs a fan of aero, I hope Google copies the Apple theme with their own aero theme. There are some places where I hope Apple improves things like legibility and contrast, but I'll take anything over the bland, flat designs of the Window 8 era.
- wpm 1y agoAlready has
- brookst 1y agoLove or hate liquid glass, the paradigm shift from "UI chrome is a wrapper around app content" to "UI is overlayed on top of app content" seems like the future. It's well aligned with AR and better separates UI layout from content for different screen sizes. I'm neutral on this first implementation (some good, some bad). But I think the approach will be picked up by essentially everyone. Good news for you, there's nothing saying the overlay UI model has to be transparent. Some will probably be opaque but still floating.
- bstsb 1y ago> 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. is this true? i know very little of iOS development but i swear i remember watching a decompilation of an app that used various internal APIs to provide animated home screen widgets
- JimDabell 1y agoThat would not get through the App Store review process.
- monocularvision 1y agoDepends on how you implement it.
- JimDabell 1y agoCan you give an example of an app in the App Store that uses internal APIs to provide animated home screen widgets?
- catsma21 1y agothinking of youtube.com/watch?v=NdJ_y1c_j_I ?
- skrebbel 1y agoI like "Alastair's Grand Theory of In-App Webviews": the main reason webviews in apps have such a bad reputation is because you don't notice the webviews that are integrated seamlessly
- actionfromafar 1y agoThere's also, in there somewhere, a corollary about how you don't notice the webviews which don't stick out but just don't feel right. Like, someone mentioned Settings app in MacOS might use them because the icons don't load fast enough. I can't help but lament just a little bit. Apple used to be about insane polish. Just think about the mentality that created the rounded screen corners on the original Mac. That's just crazy and I admire it.
- sho_hn 1y ago> Apple used to be about insane polish. I think that's mostly a brand narrative/myth. MacOS has always had warts at any given time.
- chuckadams 1y agoNo kidding. I grew up loving Macs in general, but despite some people's rose-tinted views of classic macOS in the 80's and 90's, I always had uncontrollable pangs of stabbiness every time I had to do anything in the cluttered, clunky, and tiny interface of Chooser.
- graypegg 1y ago"All toupées look fake. I've never seen one that I couldn't tell was fake."
- _alastair 1y ago"The Toupée Theory of In-App Webviews" is perfect. I might change it in the post.
- chmod775 1y agoFor those who don't know what the fuck "Liquid Glass effect" is: it's a sort of frosted glass look that apple uses for their UI. It's being sold as the best thing since sliced bread. Googling it felt like I entered a parallel universe.
- pdntspa 1y agoWindows 7 did it like 15 years ago
- jacobgkau 1y agoWindows 7's had more character.
- bigyabai 1y agoWindows 7 built a design language around it, transparency was never the main attraction. Which is smart. Contrast is king, especially on consumer hardware where grandma might not see too well in her late age. It wasn't the glass effects of Vista or Yosemite that appealed to people, it was the high-contrast UI elements and skeuomorphic design elements (neither of which are present in liquid glass).
- nomel 1y agoSmall demo: https://youtube.com/shorts/-2KaGU8G_vE https://youtube.com/shorts/-2KaGU8G_vE
- olivia-banks 1y agoMapbox is such a pretty piece of software.
- vlucas 1y agoNice find! Apple's new glass UI seems to draw a lot of ire, but I... kinda like it? It feels like the OS has some actual personality again instead of just being flat and boring. I can visually tell the size of click targets now and the buttons are finally visually distinct from text again. I view it as a welcome change. It's not just "nostalgia" either. It has actual utility. I installed the iOS 26 Beta to test some things on the websites I maintain in advance of it going public, and while there are some issues here and there I think the overall direction to add more personality back into the OS is a good one. Normies will love it.
- presbyterian 1y agoI like the glass effects and aesthetics, but I think the functionality in a lot of the apps isn't as good as it was. A lot of things that were easy-to-reach buttons are now tucked away in menus, and harder to find.
- dmix 1y agoThat always depends on how difficult discoverability is. For example if you're designing for something like Apple Watch there's very limited place for stuff, so you either pack it or you find ways to only show what's most important, using gestures or menus to do other stuff. Mobile apps having less UI elements immediately visible is not all bad. The hard part of new UX concepts like the new iOS camera button sliding feature is that it's new. Users aren't immediately familiar with it. Not every OS functionality uses it consistently. Etc. It's probably better to wait a year or two before critiquing Liquid Glass. Change is always risky and takes time to fully roll out and the ecosystem to adopt it widely.
- presbyterian 1y ago> It's probably better to wait a year or two before critiquing Liquid Glass. Releasing a broken operating system with "it'll be better in a year or two" simply doesn't work for me. If things haven't improved by the time Sequoia is EOL (which they very well me, I'm about 50/50 on it right now), I'm just going to move to Linux.
- bluSCALE4 1y agoLiquid Glass icons look like crap and it's pretty broken on iOS.
- pdntspa 1y ago[flagged]
- jacobgkau 1y agoNo, Windows 7 actually did a glass texture, whereas this is just a blur with marketing.
- dymk 1y agoChromatic aberration ain’t blur
- jacobgkau 1y agoYou know what? Granted. I found some GIFs of people scrolling content with Liquid Glass in front, and I agree, there is a more physical property there than the frost that came across to me at first glance.
- pdntspa 1y agoThis looks like a little bit more than a blur, there seem to be some refraction and some other optical-type effects. But realistically its just a blur with marketing.
- robertoandred 1y agoNo, what Mac OS X did in like 2001 or so.
- rckt 1y ago> Whoever it was at Apple that decided to make this a CSS property is a genius because it makes it incredibly easy to provide different rules based on Liquid Glass support What is genius here? Create something, that nobody asked for, create an in-house CSS property to use across approved apps. Genius? I would simply call this a dirty trick. There are a lot of things, that they could have implemented, according to the CSS spec. But they decided to spend workforce on this shit. Yeah, they are a business and free to do whatever they want with their money. But I don’t like their choices.
- nomel 1y ago> Create something, that nobody asked for Their UI team asked for it, to use internally (so far), as part of the latest UI style.
- rchaud 1y agoHow is this any different from the effect shown in this Codepen? https://codepen.io/GreggOD/pen/xLbboZ https://codepen.io/GreggOD/pen/xLbboZ
- pohl 1y agoThey're both glass-inspired effects. If you really want to know the differences, your best bet is probably the WWDC session "Meet Liquid Glass".
- mschuster91 1y ago> But my suggestion is this: the main reason webviews in apps have such a bad reputation is because you don't notice the webviews that are integrated seamlessly. Integration is one thing. The more important thing is resource consumption: Steam for example always gulps 300MB of my precious RAM for two Webview processes that aren't needed anywhere - and earlier versions actually offered a flag to disable the webviews from getting started. On Android, apps using WebView routinely means that either all other apps get OOM'd or in the worst case, the app itself gets OOM'd from its own web view with very weird side effects when whatever the webview was used for is done.
- deleted 1y ago[deleted]
- crowcroft 1y agoInteresting, using webviews is a common shortcut for a lot of functionality, and even native apps will occasionally have some webviews (that you might not even notice) out of convenience (and sometimes necessity). Apple themselves run into these exact cases and develop a compromise for themselves, while at the same time telling third party developers that aren't allowed to use the exact same compromise, and they MUST use Apple's native UI if they want liquid glass...
- yieldcrv 1y ago> the main reason webviews in apps have such a bad reputation is because you don't notice the webviews that are integrated seamlessly very true, and why I got out of mobile app development when I noticed like a decade ago, scrubbed my whole resume of it to switch to other kinds of dev I'm surprised there is still demand for that though, but I've found other solutions to be good enough, when a phone is involved
- rado 1y agoDid they provide a CSS feature to prevent modals being cut off at the Safari toolbar?
- busymom0 1y ago> the main reason webviews in apps have such a bad reputation is because you don't notice the webviews that are integrated seamlessly. My guess would be that the App Store apps on iOS and macOS and the Music app rely on these seamless web views for a lot of their dynamic layout content.
- cube2222 1y agoHonestly, why don't they just add it to Safari as a css property? I'm confident we'll have a ton of websites trying to replicate the Liquid Glass aesthetic, and will do so in a way that will eat half your laptops CPU. As the article notes, with this in CSS, it's extremely easy to have different CSS depending on whether this is available or not. At the same time, it's not like other browsers don't do "non-standard" things. I'm not saying I love Liquid Glass and I want it everywhere, but I prefer to have proper Liquid Glass everywhere on Safari, over having a custom unoptimized laggy unpolished version of it.
- mcphage 1y ago> Honestly, why don't they just add it to Safari as a css property? It's possible that they will in the future, but are still deciding on the API or implementation.
- eqvinox 1y ago> It stands to reason that Apple wouldn't have developed this feature if they weren't using it. Where? We have no idea. But they must be using it somewhere. Why must they be using it somewhere? The amount of dead code and features in common software is ridiculous. They might've changed directions 5 times through this, and the CSS property came in #2 and went out of use in #4…
- austin-cheney 1y agoWhat does liquid glass effect look like?
- philo23 1y ago> It stands to reason that Apple wouldn't have developed this feature if they weren't using it. Where? We have no idea. If I had to guess, probably in the iCloud settings inside of the Settings app. Also in the App Store/Music/TV account page (when you tap on your avatar in the top right of the app.) A bunch of those pages have quite well hidden web views pretending to be native ones, mainly loading things from the iTunes backend services (the give away is normally that you can long press <a> links and a web page preview pops up.) It's probably being used for the user guide inside of the Tips app as well. That's where I'd be looking at least.
- d--b 1y agoAt this stage it really feels like features like this’ only purpose is to make older models struggle with basic UI stuff just so people upgrade to the newer devices.
- hk1337 1y agoMaybe they don't want anyone using it...yet? I'm sure they know with the latest OS release that a lot of people are going to want to start using this immediately, perhaps they want to work out the public use of it internally first? There's definitely some unfounded accusations going on in this thread about this too. Maybe they're right? Maybe they're wrong?
- lerp-io 1y agoone more reason to never build apps for native
- koolala 1y agoWhat they want to do with USD and <model> tags is terrible too.
- deleted 1y ago[deleted]
- nipperkinfeet 1y agoIt's the ugliest trend I've seen since rounded corners and large padding. One can only hope that it will eventually cease to be a nuisance.
- msephton 1y agoMusic app, especially the Apple Music side of things, has historically been big on web views.
- ftchd 1y agoin general, just imagine the possibilities if Apple gave more power to WebViews