title: Opacity Zero in CSS not working on Iframe elements
body: <p>Opacity Zero is used to non-visible the elements but still the element functions will work like links are clickable, buttons are clickable, and texts are able to select.</p>
  <p>It working like i mentioned above but the same when i am trying to do iframe then instead of element getting transparent it getting disabled. In Opacity &quot;0&quot; all the elements are get disabled and non-functional.</p>
  <p>Code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test {
  opacity : 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;
      &lt;a href="#www.example.com"&gt; Outside element &lt;/a&gt;
  &lt;iframe src="https://example.com/" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If you see the above, the link inside the DIV is clickable after Opacity Zero but the link inside the iframe get disabled.</p>
  <p>Opacity like 0.1, 0.2, etc working fine in both Iframe element and page element but only the Opacity Zero is not working on iframe element.</p>
  <p>YouTube : <a href="https://youtu.be/oBHi_fOpzLQ" rel="nofollow noreferrer">https://youtu.be/oBHi_fOpzLQ</a></p>