I’m currently using ion-header-bar w/ a class bar-frosted for the iOS frosted glass blur by doing:
-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
backdrop-filter: saturate(180%) blur(20px) !important;
It’s great…but I really want to do the same thing with ion-nav-bar instead of ion-header-bar. My current usage involves hiding the ion-nav-bar and using the ion-header-bar as a replacement for a single view, because doing the above styling on ion-nav-bar causes it to disappear entirely.
The problem is that without the ion-nav-bar a user can tap + hold + swipe up or down in just the right way and move the entire view, including the ion-header-bar. This doesn’t happen with the ion-nav-bar. The ion-nav-bar stays firmly in it’s place no matter how much swiping up and down you do, just as a user would expect.
So after banging my head against the wall for far too long I’ve come to see if anyone here knows:
- How to use -webkit-backdrop-filter and backdrop-filter on ion-nav-bar without making it disappear completely
- How to modify ion-header-bar so that it behaves like ion-nav-bar, eg not ever moving when a user goes tap + hold + swipe up and down