title: Ionic - White edge on iPhone X in header
body: <p>Loading an app on iPhone X and I have white bars on the two sides of the notch. I am using Ionic Tabs. I have tried changing the body and <code>ion-app</code> background colour. </p>
  
  <pre><code>body, ion-app.app-root {
      background-color: color($colors, main);
  }
  </code></pre>
  
  <p>First include <code>viewport-fit=cover</code></p>
  
  <p>Running <code>"cordova-plugin-statusbar": "^2.2.3"</code></p>
  
  <p>Also tried to change Statusbar background colour with <code>&lt;preference name="StatusBarBackgroundColor" value="#25707B" /&gt;</code> Don't know what is causing them.</p>
  
  <p>Edit: Added image of the white edge.</p>
  
  <p><a href="https://i.stack.imgur.com/Zq9C8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zq9C8.jpg" alt="enter image description here"></a></p>