search

ionic-team / ionic-v1

The repo for Ionic 1.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
192 stars 187 forks source link

Ionic iPhone X Update Header Display Alignment #339

Closed westoj closed 6 years ago

westoj commented 6 years ago

Note: If you are having problems formatting your issue please refer to this article on using markdown in Github:

https://guides.github.com/features/mastering-markdown/

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/ http://ionicworldwide.herokuapp.com/

Short description of the problem:

After upgrading to ionic 1.3.5 the header alignment on the iphone X seems broken. The buttons and titles are too high on the layout. I have made no manual css adjustments to the header. The view titles are also high, touching the camera housing "notch".

screen shot 2017-11-20 at 15 13 21

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.3.5

Run ionic info from terminal/cmd prompt: (paste output below)

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.18.0
ionic (Ionic CLI) : 3.18.0

global packages:

cordova (Cordova CLI) : 7.0.1 
Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework   : ionic1 1.3.5

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.0 
Node              : v6.12.0
npm               : 5.5.1 
OS                : macOS Sierra
Xcode             : Xcode 9.0 Build version 9A235

Environment Variables:

ANDROID_HOME : /Users/Oliver/Library/Android/sdk

Misc:

backend : pro
westoj commented 6 years ago

This ended up being a gulp-minify-css issue, switching to using gulp-clean-css solved the problem. Turns out gulp minify css isn't particularly good at minifying.