Opacity Zero in CSS not working on Iframe elements

Sted 0
Viewed 34

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.

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 "0" all the elements are get disabled and non-functional.

Code :

#test {
opacity : 0;
}
<div id="test">
    <a href="#www.example.com"> Outside element </a>
<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></iframe>
</div>

If you see the above, the link inside the DIV is clickable after Opacity Zero but the link inside the iframe get disabled.

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.

YouTube : https://youtu.be/oBHi_fOpzLQ

opacity iframe javascript css html
1 Answers

Setting the opacity to 0 will make the elements available but not shown. If you want to hide the elements without the ability to use the items inside the code, why don't you use display: none;?

Abdulrahman Hasanato0
Related