Visibility: hidden, within display: none

by Jools Chadwick

HTML

<div id='grandparent'>
<div id='parent'>
  <div id='child'>

  </div>
</div>
</div>

CSS

.displayNone{
  display: none;
}

.visibilityHidden{
  visibility:hidden;
}

JavaScript

$(document.body).append('Child on startup - '+$('#child').css('visibility')+'</p>');

$('#parent').addClass('displayNone');
$(document.body).append('Child after display:none on parent - '+$('#child').css('visibility')+'</p>');

$('#grandparent').css('visibility','hidden');
$(document.body).append('Child after visibility:hidden on grandparent - '+$('#child').css('visibility')+'</p>');

$('#parent').height();
$(document.body).append('Child after poking Chrome - '+$('#child').css('visibility')+'</p>');