iOS 11 ion-toolbar styling

[rafbgarcia]

Ionic version: (check one with "x")
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Since my update to iOS 11, ion-toolbar styles are messed up.

Correct styling

• MacOS Sierra 10.12.6
• Chrome 61.0.3163.100

---

Wrong styling 1

• iPhone 6 running iOS 11.0.3
• ionic-angular v3.7.1

---

Wrong styling 2

• iPhone 6 running iOS 11.0.3
• ionic-angular v3.7.1-201710101557

Related code:

<ion-footer [hidden]="cart.isEmpty()">
  <ion-toolbar (tap)="openCartModal()" no-padding>
    <section class="flex-row pl-3">
      <div>
        <div class="mb-2"><strong>{{cart.numberOfItems()}} itens</strong></div>
        <div>{{ cart.subtotal() | monetize }}</div>
      </div>
      <button ion-button icon-left>
        <ion-icon name="cart"></ion-icon>
        Ver carrinho
      </button>
    </section>
  </ion-toolbar>
</ion-footer>

<ion-toolbar (tap)="pushNextPage()" [ngClass]="{disabled: !cart.hasItems()}">
    <section class="flex-row p-2">
      <div>
        Entrega ({{ restaurant.deliveryTime }})
      </div>
      <div>
        {{ cart.deliveryFee() | monetize }}
      </div>
    </section>

    <section class="flex-row p-2">
      <div>
        Subtotal
      </div>
      <div>
        {{ cart.subtotalPlusDeliveryFee() | monetize }}
      </div>
    </section>

    <button ion-button block icon-right>
      Escolher forma de pagamento
      <ion-icon class="icon-absolute-right" name="arrow-forward" large></ion-icon>
    </button>
  </ion-toolbar>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/Users/rafa/.nvm/versions/node/v8.5.0/lib/node_modules)

    @ionic/cli-utils  : 1.13.0
    ionic (Ionic CLI) : 3.13.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.3.0 ios 4.5.2
    Ionic Framework    : ionic-angular 3.7.1-201710101557

System:

    Android SDK Tools : 25.2.3
    ios-deploy        : 1.9.2
    Node              : v8.5.0
    npm               : 5.4.2
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235

Misc:

    backend : pro

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having?

Also, it appears you are talking only about the footer and not anything in the header in your examples. It would be best to be explicit about what the problems are (the ones in the footer are obvious, but still be to make all of that explicit).

Thanks for using Ionic!

[rafbgarcia]

My apologies, yes the ion-toolbars in the footer are the issue. I will create a sample app as soon as I can.

Thanks!

[kensodemann]

Hello! As it seems it has been a while since there was any activity on this issue I am closing it for now. Feel free to comment if you are still running into this issue.

If you are still having the issue, please be sure to include a GitHub repo with a sample application.

Thanks for using Ionic!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.