v4.0.0-alpha.8: does not comply with statusbarPadding

[ghybs]

Bug Report

Ionic Info
Using @ionic/core version 4.0.0-alpha.8 directly from npm / unpkg CDN.
Chromium and Firefox browsers

Describe the Bug
Ionic retrieves some configuration options from the location query parameters that start with ionic:.
In particular, ionic:statusbarPadding=true adds a top margin to account for the mobile status bar / notch (iPhone X).
But in version 4.0.0-alpha.8, this configuration option is no longer applied.

Steps to Reproduce

1. Go to https://beta.ionicframework.com/docs/api/action-sheet/
2. In "ios" mode (as default), the top toolbar displays behind the mobile simulator notch.

It was working fine in previous versions, e.g. in 4.0.0-alpha.7:
https://beta.ionicframework.com/docs/api/4.0.0-alpha.7/action-sheet

Related Code
Direct link to demo app: https://beta.ionicframework.com/docs/content/api//action-sheet-demo.html?ionic:mode=ios&ionic:statusbarPadding=true
With a Plunker: https://plnkr.co/edit/Iy74e71fNDoiYPm7VcBo?p=preview (includes an iframe calling a 2nd HTML page so that we can set the option in the src query params)

Expected Behavior
When the location includes the query parameter ionic:statusbarPadding=true, the App should add an extra top margin to account for the device status bar / notch.

Additional Context
None.

[jgw96]

Hello! Are you still running into this issue with alpha.10 ?

[ghybs]

Hi, thank you for your message!

Yes indeed, the situation is the same with latest release version alpha.10:
https://plnkr.co/edit/W9JuuGZ8zeSuurbEndwV?p=preview

Same with the demo apps on Ionic docs beta, which seem to have been updated to alpha.10 as well:

• https://beta.ionicframework.com/docs/api/action-sheet/ (with both es5 (https://unpkg.com/@ionic/core/dist/ionic/ionic.fg6hz9na.js) and es6 (https://unpkg.com/@ionic/core@4.0.0-alpha.10/dist/ionic/ionic.tg6hopft.js) versions)
• direct link: https://beta.ionicframework.com/docs/content/api//action-sheet-demo.html?ionic:mode=ios&ionic:statusbarPadding=true

[ghybs]

FWIW, same with alpha.11:
https://plnkr.co/edit/kfrB50EfgHmdqOqyjtMr?p=preview

[silverio]

Same issue on beta.0

I made a fresh install of the tabs app, both nav bar and tabs rendered without the proper padding on an iPhone X.

[Mobiletainment]

Same issue on 4.0.0-beta.1

Update: after rebuilding everything I noticed that the opposite happened. It's too much padding now:

ion-header ion-toolbar:first-child: {
    padding-top: calc(env(safe-area-inset-top) + var(--ion-statusbar-padding))
}

[silverio]

I agree @Mobiletainment. I am having the same issue, there is too much padding now on 4.0.0-beta.1

[philmerrell]

Yes! Thank you for posting the issue. Too much padding now on 4.0.0-beta.1

[brandyscarney]

This should be fixed in beta.3. I updated your sample demos and I see it working now so I am going to close this. Please let me know if you're still seeing issues though, thanks!