title: Ionic: hide backdrop in ion-menu
body: <p>I have an Ionic app using an ion-menu to open a burger menu. However, I don't want to have the backdrop on the right as shown in this screenshot:</p>
  <p><a href="https://i.stack.imgur.com/BXKls.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BXKls.jpg" alt="enter image description here" /></a></p>
  <p>What I want to have is this (without the backdrop):</p>
  <p><a href="https://i.stack.imgur.com/fELdz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fELdz.jpg" alt="enter image description here" /></a></p>
  <p>The ion-menu:</p>
  <pre><code>&lt;ion-menu side=&quot;start&quot; type=&quot;push&quot; menuId=&quot;first&quot; contentId=&quot;main&quot; class=&quot;burger-menu&quot;&gt;...&lt;/ion-menu&gt;
  </code></pre>
  <p>I've tried about everything in CSS:</p>
  <pre><code>.burger-menu {
    // Doesn't work
    --backdrop: none !important;
    backdrop-filter: none !important;
  }
  
  // Doesn't work
  ion-menu#backdrop {
    display: none !important;
  }
  
  // Doesn't work
  ion-menu &gt; ion-backdrop {
    display: none !important;
  }
  
  // Doesn't work
  ion-backdrop.menu-backdrop {
    display: none !important;
  }
  
  // Doesn't work
  :host(.menu-type-push) .show-backdrop {
    display: none !important;
  }
  </code></pre>
  <p>But none of them seem to work.</p>
  <p>EDIT: here's what I'm seeing in the console when I open the menu.
  <a href="https://i.stack.imgur.com/LgYWp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LgYWp.jpg" alt="enter image description here" /></a></p>