Transparent navbar issue on iOS

ionic-v1
1

Hi everybody,

I’m trying to get a transparent navbar on my application.
It works great on browser, but doesn’t on ios.

Here are some pictures:

Working version on browser:
image

Problem on IOS:

image
Capture d’écran 2015-08-10 à 12.00.41.png925×434 355 KB

If someone knows how to make it work on iOS, let me know.

Thank you.

2

Have you tried googling this problem?

3

Hi @Gajotres, of course I tried, I’m struggling with it for 2 days.

I already have:

.bar-clear.bar.bar-header {
  background: none;
}
.scroll-content {
  overflow: visible !important;
}

Asa you can see, it works on browser, not on emulator/build.

4

Can you create a simple working example and I will take a look?

Usually, I would do it but I’m on vacation, so there’s no point in spending too much time near my computer.

5

@Gajotres, I pushed a test on my codepen.

Note that transparent header is now ok, but the content is positioned 44px too low.
If I scroll up, everything is ok.

Thank you and enjoy your vacation.

6

I just found the reason on iOS.
There’s a specific CSS rule that is applied on iOS.

.platform-ios.platform-cordova:not(.fullscreen) .has-header {
  top:64px;
}

Setting this to 0px solved the problem on iOS emulator.

Hope this helps.

7

can make blur like iOS too ?