Ionic iPhone X safe areas not working properly

Question

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.

.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;
}

cli packages:

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 1.3.12
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

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

Answer 1

  margin-top: 20px; /* Status bar height on iOS 10 */
  margin-top: constant(safe-area-inset-top); /* Status bar height on iOS 11.0 */
  margin-top: env(safe-area-inset-top); /* Status bar height on iOS 11+ */

And reduce by 20px top/bottom move respectively.