title: Hidding an element as alternative to animation
body: <p>I have the following CSS <a href="http://plnkr.co/edit/G1Z7aH523t88umtExxtd" rel="nofollow">Plunker Example</a>:</p>
  
  <pre><code>@-webkit-keyframes ngdialog-fadeout {
    0% {opacity: 1;}
    100% {opacity: 0; }
  }
  
  @keyframes ngdialog-fadeout {  
    0% {opacity: 1;}
    100% {opacity: 0; }
  }
  
  .ngdialog.ngdialog-closing .ngdialog-overlay {
    -webkit-backface-visibility: hidden;
    -webkit-animation: ngdialog-fadeout 0.5s;
    animation: ngdialog-fadeout 0.5s;
  }
  
  .ngdialog.ngdialog-closing .ngdialog-content {
    -webkit-backface-visibility: hidden;
    -webkit-animation: ngdialog-fadeout 0.5s;
    animation: ngdialog-fadeout 0.5s;
  }
  </code></pre>
  
  <p>I do not want to use animation. So I tried the following:</p>
  
  <pre><code>.ngdialog.ngdialog-closing .ngdialog-overlay {
    visibility: hidden;
  }
  
  .ngdialog.ngdialog-closing .ngdialog-content {
    visibility: hidden;
  }
  </code></pre>
  
  <p>I am able to hide it but after doing it every link on the page is non reactive like something is over it ...</p>
  
  <p>What am I missing?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I tried the following:</p>
  
  <pre><code>.ngdialog {    
    bottom: 0;
    left: 0;
    overflow: auto;
    position: fixed;   
    right: 0;
    top: 0;
    z-index: 10000;
    -webkit-overflow-scrolling: touch;
  }
  
  .ngdialog-overlay {
    background-color: black;
    bottom: 0;
    left: 0;
    position: fixed;  
    right: 0;
    top: 0;    
    opacity: 0.6;
    z-index: 100000;
  }
  
  .ngdialog.ngdialog-closing .ngdialog-overlay {  
    opacity: 0;
    visibility: hidden;
  }
  
  .ngdialog-content {
    background: white;
  }
  
  .ngdialog.ngdialog-closing .ngdialog-content {
    opacity: 0;
    visibility: hidden;
  }
  </code></pre>
  
  <p>The same problem happens ...</p>