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!

[ghybs]

Works fine now indeed! 👍

Just for the sake of testing, here is a Plunker updated with @ionic/core@4.0.0-beta.3 and some radio inputs to easily switch between modes and statusbarPadding config:
https://plnkr.co/edit/GJnEC8qpfit8fWuWDdIa?p=preview

=> statusbarPadding correctly applied for both iOS and MD modes, and hidden when statusbarPadding query parameter is omitted.

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