title: Buttons cannot be clicked after making the svg preserve its AspectRatio CSS
body: <p>I'm using a svg (inline) as my background. To have the svg preserve its AspectRatio I did some changes to the <code>&lt; svg &gt;</code> tag and added a class with some CSS. After I added the CSS none of the buttons on the webpage can be clicked. Any ideas what may be causing this?</p>
  
  <p>If I remove <code>.my-svg{ ... }</code> then the buttons works but the svg does not preserve its aspect ratio.</p>
  
  <p>I even tried removing <code>&lt;div class="bgBody"&gt;</code> but that did not solve the problem either.</p>
  
  <pre><code>&lt;div class="bgBody"&gt;
  &lt;svg class="my-svg" preserveAspectRatio= "xMinYMin meet" viewBox="0 0 800 960" &gt;
   &lt;g&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.my-svg-container{
   display: inline-block;
   position: relative;
   width: 50%;
   padding-bottom: 60%;
   vertical-align: middle; 
  }
  
  .my-svg{ 
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  </code></pre>