Visibility Hidden - Iframe Issue

by joshuatz

HTML

<p>The embed below should *NOT* be visible, but yet it is, because the `visibility:visible` on the child iframe overrides the parent...</p>
<!-- Hidden using visiblity:hidden; -->
<div class="hidden">
	<blockquote class="reddit-card" data-card-created="1570478987"><a href="https://www.reddit.com/r/dogpictures/comments/7bgy66/abby_is_being_so_patient_with_the_new_puppy/">Abby is being so patient with the new puppy.</a> from <a href="http://www.reddit.com/r/dogpictures">r/dogpictures</a></blockquote>
	<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
</div>

<p>The embed below is there (you can inspect element to check), but stays hidden because the parent has `display: none;`</p>
<!-- Hidden using display:none; -->
<div class="display-none">
	<blockquote class="reddit-card" data-card-created="1570478987"><a href="https://www.reddit.com/r/dogpictures/comments/7bgy66/abby_is_being_so_patient_with_the_new_puppy/">Abby is being so patient with the new puppy.</a> from <a href="http://www.reddit.com/r/dogpictures">r/dogpictures</a></blockquote>
	<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
</div>

CSS

.hidden {
	visibility: hidden;
}
.display-none {
	display: none;
}