Ion-nav-bar + backdrop-filter = disappears?

ionic-v1
1

I’m currently using ion-header-bar w/ a class bar-frosted for the iOS frosted glass blur by doing:

background-color:rgba(35,35,35,0.8) !important;
-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:

  1. How to use -webkit-backdrop-filter and backdrop-filter on ion-nav-bar without making it disappear completely
    and/or
  2. 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

Thanks!

2

If anyone else is trying to sort this out, my solution was to just use ion-nav-bar as usual with bar-clear, then inside the nav bar place <div class="bar bar-frosted"></div> so it sits behind the clear nav content (buttons, title) and produces the frosted blur with the styling:

background-color:rgba(35,35,35,0.65) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
backdrop-filter: saturate(180%) blur(20px) !important;

Works as expected now. No weird pull or swipe stuff and the frosted effect looks great.