bug: 5.0.0-rc.2 padding top (safe-area-inset) not applied anymore
See original GitHub issueBug Report
Ionic version:
[x] 5.0.0-rc.2
Current behavior:
Safe area inset top is not applied to translucent ion-header
s 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 (cordova-lib@9.0.1)
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
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (6 by maintainers)
Top Results From Across the Web
bug: 5.0.0-rc.2 padding top (safe-area-inset) not applied ...
Current behavior: Safe area inset top is not applied to translucent ion-header s anymore. Expected behavior: Safe area inset top is applied.
Read more >SafeAreaInsets Size for SwiftUI pa… | Apple Developer Forums
i already used .padding(.top, UIApplication.shared.windows[0].safeAreaInsets.top) ... so in new version what is the best way for getting safe area insets?
Read more >CSS safe area attributes doesn't work on iPhone X
In my case I'm running a web app on iPhone X, I'm trying to add a padding ...
Read more >react-native-cli | Yarn - Package Manager
Fast, reliable, and secure dependency management.
Read more >'windows' was deprecated in ios 15.0: use uiwindowscene ...
I want to get rid of the " 'windows' was deprecated in iOS 15.0: Use UIWindowScene.windows on a relevant window scene instead" message...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@liamdebeasi Padding works now 😃 thank you!
Yep just noticed that. I’ll fix that and push another dev build 👍