title: IE onclick issue with hidden modal div that gets shown with CSS transition
body: <p>I am encountering some inconsistencies with IE9+ with a hidden modal div. See the code below: On any other HTML5 browser, the inline onclick of the  will trigger the alert first and then transition in the div. Clicking anywhere on the document after will hide the div again by going to #close.</p>
  
  <p>On IE however, clicking the  seems to totally bypass the inline onclick and goes straight to #close. </p>
  
  <p>I know there is many workarounds/alternatives to achieve the same but I am just trying to understand why IE does</p>
  
  <pre><code>&lt;style type="text/css"&gt; 
  .modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);z-index: 10000;-webkit-transition: opacity 500ms ease-in;-moz-transition: opacity 500ms ease-in;transition: opacity 500ms ease-in;opacity: 0;pointer-events: none;}
  .modal:target {opacity: 1;pointer-events: auto;}
  &lt;/style&gt;
  &lt;span onclick='alert("bang");location.href="#popup"'&gt;Bang&lt;/span&gt;
  &lt;div onclick="location.href='#close'" id=popup class=modal&gt;stuf&lt;/iframe&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>Any tips/info would be highly appreciated!</p>