Ion-grid text centering incorrect on iPhone X landscape mode

[EWBears]

Ionic version: (check one with "x")
[ ] 2.x
[X] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request

Current behavior:
Text inside ion-grid cells have more padding on the right side than the left (see screenshots)

Expected behavior:
Text should be centered in each cell

Steps to reproduce:
Create an ion-grid with text in each cell and run on iPhone X simulator

Related code:
N/A

Other information:
Just wanted to add a thank you note for work on the framework and the fast support for iPhone X! Thanks!

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages:

    @ionic/cli-utils  : 1.14.0
    ionic (Ionic CLI) : 3.14.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 6.3.0 ios 4.5.1
    Ionic Framework    : ionic-angular 3.8.0

System:

    Android SDK Tools : 26.0.2
    ios-deploy        : 1.9.2 
    Node              : v8.6.0
    npm               : 5.5.1 
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having?

It appears the same sample app could probably also be used for #13321

Thanks for using Ionic!

[EWBears]

I included the relevant footer code for #13321 that can be copied and pasted onto the home page of a blank project.

Below is a sample grid that will have off centered text on an iPX in landscape mode for placement in the ion-content. I actually don't know how to upload a sample application to my GitHub, but hopefully this is pretty straightforward to recreate. If the sample application is important, I'm sure that I can google and figure it out.

<ion-grid no-padding>
   <ion-row>
      <ion-col col-3><button ion-item block>Sample</button></ion-col>
      <ion-col col-3><button ion-item block>Text</button></ion-col>
      <ion-col col-6><button ion-item block>This will appear</button></ion-col>
   </ion-row>
   <ion-row>
      <ion-col col-3><button ion-item block>Off center</button></ion-col>
      <ion-col col-3><button ion-item block>Only on</button></ion-col>
      <ion-col col-6><button ion-item block>iPhone X landscape</button></ion-col>
   </ion-row>
</ion-grid>

Thanks for the quick reply and have a good evening!

[EWBears]

This centering issue can be seen in the linked repo: https://github.com/kensodemann/test-iphonex

[kensodemann]

I am not sure how the linked repo shows the centering issue. Here is a screenshot showing it running on an iPhone 6 and an iPhone X. They look fairly compatible to me with the only real difference being the safe zone areas being respected on the iPhone X.

[EWBears]

OK I forked your repo and made changes to 2 files (home.html and variables.scss) to demonstrate this issue:
https://github.com/EWBears/test-iphonex

I had edited my grid code after I typed my initial response to show that the text was on buttons inside the grid cells, but I didn't know that you had already created a test repo. The text is shifted to the left side of the button regardless of which direction that the notch is pointed, as seen in the photo below. The text is centered, as expected, when in portrait orientation. Sorry for the trouble required to get this working.

Notch left:

Notch right:

Portrait:

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#517