[Solved] Weird Top Bar Behavior on iOS

[Julian Wagner]

Normally the top bar should behave like on picture one, and it does on every browser, mobile or desktop, but on the iOS APP the Top Bar gets this margin, but just on the pages that get pushed in front of the navigator. On the front pages not. I think there is some CSS fuckin it up, but I cant see whats going on, since its only happening on the iOS App. I tried to debug with Safari, but It finds my phone, but not the app to debug :/

URL is nights.cool

[munsterlander]

@Julian-Wagner I’m a bit confused by the issue. Are you saying that the icon is too close to the right margin in the first image and that is a problem OR is it that the text does not wrap in the title bar in the second image?

[Julian Wagner]

Yeah I know the button on the top is not correct, but that’s not what im asking currently. In the second picture is a margin between the Header of the App and the Status Bar that shouldn’t been there.

[munsterlander]

@Julian-Wagner Ah, ok. I see that now. With it being all white, it just blended in and I couldn’t figure out what you were mentioning. So, this is the default CSS:

.navigation-bar {
  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 17px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 2;
  display: block;
  height: 44px;
  padding-left: 0;
  padding-right: 0;
  background: #fff;
  color: #1f1f21;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: 400;
  width: 100%;
  white-space: nowrap;
  border-bottom: none;
  -webkit-background-size: 100% 1px;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: -webkit-linear-gradient(90deg, #bbb, #bbb 100%);
  background-image: -moz-linear-gradient(90deg, #bbb, #bbb 100%);
  background-image: -o-linear-gradient(90deg, #bbb, #bbb 100%);
  background-image: linear-gradient(0deg, #bbb, #bbb 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .navigation-bar {
    background-image: -webkit-linear-gradient(90deg, #bbb, #bbb 50%, transparent 50%);
    background-image: -moz-linear-gradient(90deg, #bbb, #bbb 50%, transparent 50%);
    background-image: -o-linear-gradient(90deg, #bbb, #bbb 50%, transparent 50%);
    background-image: linear-gradient(0deg, #bbb, #bbb 50%, transparent 50%);
  }
}
.navigation-bar__bg {
  background: #fff;
}
.navigation-bar__item,
.navigation-bar__left,
.navigation-bar__right,
.navigation-bar__center {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  height: 44px;
  vertical-align: top;
  overflow: visible;
  display: block;
  vertical-align: middle;
  float: left;
}
.navigation-bar__left {
  max-width: 50%;
  width: 27%;
  text-align: left;
  line-height: 44px;
}
.navigation-bar__right {
  max-width: 50%;
  width: 27%;
  text-align: right;
  line-height: 44px;
}
.navigation-bar__center {
  width: 46%;
  text-align: center;
  line-height: 44px;
  font-size: 17px;
  font-weight: 500;
  color: #1f1f21;
}
.navigation-bar__title {
  line-height: 44px;
  font-size: 17px;
  font-weight: 500;
  color: #1f1f21;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.navigation-bar__center:first-child:last-child {
  width: 100%;
}

I would see if any of that is conflicting or maybe set a firm size and see what that does. Have you also tried disabling auto style and forcing a platform to see what that does, as you said Android works but iOS does not? It would appear you are doing all custom CSS, so if you are not relying on the auto styles, you may not need them.

[Julian Wagner]

@munsterlander

I tried to remove the Back Button and I made the Toolbar:

    <Toolbar>
        <div className='left'></div>
        <div className='center'>{this.props.event.name}</div>
        <div className='right'></div>
      </Toolbar>

To see if its maybe because of the missing right div that wasnt there before or the back button, but it wasnt. I cant see anything in the css too…

I now removed the toolbar completely to see if its a problem inside the toolbar but it isnt. There is a gap even without a navigation bar!

The strange thing is that it only happens if I run my meteor app with meteor run ios or build an iOS App, its not happening if I just open the URL on an iPhone.

So the Cordova inAppBrowser somehow thinks it has to gap the content. But curiously just on subpages. My Im doing something wrong with the navigator. Maybe im openinng an new navigator instance and that instance doesnt know, that it doesnt need to make an gap :/

Im really stuck right now

[Julian Wagner]

Ok i fixed it, ill write how for furture readers later. I have to attend some meetings now first. But dont waste your time helping me.

[Julian Wagner]

Ok, so the gap came by the Onsen Status-bar-fill Utility Function:

https://onsen.io/v2/docs/js/util.html

As you can see there you can disable this function with

ons.disableAutoStatusBarFill().

So did I in my Meteor App, its has a own function for this.

The reason why it just appeared on the second page was that I somehow manipulated the design with my tab navigation structure. I fixed this before I found the upper solution and than had the gap on all pages lol.