javascript - iframe within hidden div - iframe content not visible -

i'm looking explanation of following observed behaviour:

a

    <div id="parent" style="visibility:hidden">      <div id="child" style="visibility:visible"></div>     <div> 

b

    <div id="parent" style="visibility:hidden">      <iframe>       <div id="child" style="visibility:visible"></div>      </iframe>     <div> 

in scenario a, content of div 'child' visible in browser. in scenario b, content of div 'child' not visible in browser, despite having visibility set visible

all styling applied using javascript, above crude representation of situation. tested in chrome 51.0.2704.106 m can explain why adding iframe, inherits parent hidden visibility value, hides child div without changing visibility value?

visibility: hidden display:none. if give display none of parent class or element can't see children element. can not see child div because hid parent div of child div .

but top can see child because top child , parent both individual div not included in other div. hope understand . can take more information reference link :-

link more information