Ionic-framework: bug: 5.0.0-rc.2 padding top (safe-area-inset) not applied anymore

[DavidStrausz]

Bug Report

Ionic version:


[x] 5.0.0-rc.2

Current behavior:
Safe area inset top is not applied to translucent ion-headers anymore.

Expected behavior:
Safe area inset top is applied.

Steps to reproduce:
Install 5.0.0-rc.2 -> open any page with an translucent ion-header on an iOS device with notch (e.g. iPhone X)

Related code:
https://github.com/ionic-team/ionic/blob/43d00415a5fd5044f821c4c8d60397f72b7bb96d/core/src/components/header/header.scss#L17

Other information:
I think because of the newly added div.header-background the CSS rule is not applied anymore, moving the div in inspector fixes the issue.

Ionic info:

Ionic:

  Ionic CLI                     : 5.4.15 (/usr/local/lib/node_modules/ionic)
  Ionic Framework               : @ionic/angular 5.0.0-rc.2
  @angular-devkit/build-angular : 0.900.0-rc.12
  @angular-devkit/schematics    : 9.0.0-rc.12
  @angular/cli                  : 9.0.0-rc.12
  @ionic/angular-toolkit        : 2.0.0

Cordova:

  Cordova CLI       : 9.0.0 ([email protected])
  Cordova Platforms : ios 5.0.1
  Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 27 other plugins)

Utility:

  cordova-res : not installed
  native-run  : not installed

System:

  ios-deploy : 1.9.2
  ios-sim    : 8.0.2
  NodeJS     : v12.4.0 (/usr/local/bin/node)
  npm        : 6.11.3
  OS         : macOS Catalina
  Xcode      : Xcode 11.3.1 Build version 11C504

[brandyscarney]

Thank you for the issue!

@liamdebeasi I can confirm this happens with a translucent header without the large title.

[DavidStrausz]

@liamdebeasi Almost, now the padding is applied to the first toolbar in the secondary header in ion-content (see screenshot).

Also, the color (or filter) of the primary header seems a bit off when using the large header + translucent whereas it works fine with only a small header + translucent (I can open an extra issue if you want to keep them separated).

[liamdebeasi]

Yep just noticed that. I'll fix that and push another dev build 👍

[liamdebeasi]

Ok can you give this dev build a try? 5.0.0-dev.202002041730.fbcf48c

[DavidStrausz]

@liamdebeasi Padding works now :) thank you!

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20375 and will be available in an upcoming release of Ionic Framework.

[ionitron-bot[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.