title: Ionic iPhone X safe areas not working properly
body: <p>I'm trying to fit a  between the top toolbar and the bottom tabs area. And I need it to work across iPhones 5-X and iOS 10-11. If you ignore iOS10, then no problem exists, but I also need the older versions to work. Here's my CSS. "margin-top" gives the error with iOS 10. If I use "padding-top" then it doesn't work on iPhone X. This is the LoadingController cover, so I don't want to sort it out programmatically from JS to HTML (and don't know how to access the HTML for loading controller to be honest). I have solved this programmatically for Google Maps, but was wondering if there is a solution via CSS? I've got all the latest versions of everything and WKWebView. My ionic view is below.</p>
  
  <pre><code>.loading-ios {
    margin-top: constant(safe-area-inset-top);
    margin-top: env(safe-area-inset-top);
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  
    background-color: white;
    opacity: 1 !important;
    position: absolute;
    top: 64px;
    bottom: 49px;
  }
  </code></pre>
  
  <p>cli packages: </p>
  
  <pre><code>@ionic/cli-utils  : 1.19.0
  ionic (Ionic CLI) : 3.19.0
  </code></pre>
  
  <p>global packages:</p>
  
  <pre><code>cordova (Cordova CLI) : 7.1.0 
  </code></pre>
  
  <p>local packages:</p>
  
  <pre><code>@ionic/app-scripts : 1.3.12
  Cordova Platforms  : ios 4.5.4
  Ionic Framework    : ionic-angular 3.9.2
  </code></pre>
  
  <p>System:</p>
  
  <pre><code>ios-deploy : 1.9.2 
  ios-sim    : 5.0.12 
  Node       : v8.9.3
  npm        : 5.5.1 
  OS         : macOS High Sierra
  Xcode      : Xcode 9.2 Build version 9C40b
  </code></pre>